Skip to content

Commit

Permalink
Add Known Issue/instructions to fix FOUC to readme. Addresses #56, #77.
Browse files Browse the repository at this point in the history
Closes #92.
  • Loading branch information
travco authored and kswedberg committed Jul 24, 2014
1 parent ab8310d commit 79463fa
Showing 1 changed file with 29 additions and 0 deletions.
29 changes: 29 additions & 0 deletions readme.md
Expand Up @@ -86,6 +86,35 @@ been able to reproduce the problem on my machine, which leads me to believe
that certain graphics settings in Windows must also be contributing to the
bug. In any case, if this is a concern for you, avoid using fades for those
effects options.
* As noted by a number of people (issue [#56], [#60]), this plugin can cause
"flickering" in its expandable elements on loading the webpage. It usually happens when multiple other scripts are present and the expander stalls during its initialization. It is (sadly) an issue that stems directly from its method of making
expandable text, and cannot be fixed without changing what the plugin is, or how
it operates. Nonetheless, the flicker can be prevented by the same semi-hacky fixes normally used for other FOUC (flash of unstyled content) issues:

1. Add a JS script in the head that will add a "js" class to the html element
(see http://www.learningjquery.com/2008/10/1-way-to-avoid-the-flash-of-unstyled-content/).
This is done by JavaScript so that the element will not be hidden for clients with their JavaScript disabled/inoperable.

2. Add the following somewhere in your CSS (using your own class names):
```css
.js .myexpander.js-myexpander-hidden {
display: none;
}
```

3. Add a JS script that will execute later (bottom of body or within `$(document).ready()`):
```js
$('.myexpander').expander().removeClass('js-myexpander-hidden');
```

3.5. If you still see a little "flash" of unstyled content, add this script to remove the class in an onSlice callback:
```js
$(.myexpander).expander({
onSlice: function() {
$(this).removeClass('js-myexpander-hidden');
}
});
```

## Demo

Expand Down

0 comments on commit 79463fa

Please sign in to comment.