what's issue?
when toggle image setting or unsetting "display: none" - first time goes invisible, leaves space allocated - second time not become visible
how reproduce issue?
when using ie 7 (or less) or ie 8 in compatibility mode, open html in gist: - click toggle button, image disappears, scroll still thinks image there - click toggle button again, image not reappear
what trying do?
i working on project displays large amount of user data, , next user data display icons - content of page rendered dynamically based on ajax calls. , there code (which gets invoked when check/uncheck display options) make these icons invisible/visible. users displayed in large grid layout - tables necessary. performance enhancement, started use yui stylesheets make large number of icons of same type disappear/reappear.
what want know?
what root cause display issue in ie?
what not want know?
i don't want know how change dom structure fix issue. know removing dummy table around div makes issue go away. if put html directly content_pane element without dynamically generating it, issue goes away there too. oh , ff/chrome work fine (did need mention that?)
issue demonstration
<html> <head> <title>stylesheet testing</title> <script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js" charset="utf-8"></script> <script type="text/javascript"> yui().use("event", "stylesheet", function(y){ var stylesheet = new y.stylesheet(); var toggletset = true; y.on("click", function() { if (toggletset) { stylesheet.set('.myclass', {display: 'none'}); } else { stylesheet.unset('.myclass', 'display'); } toggletset = !toggletset; }, "#toggle"); var html = [ '<table><tr><td>', '<div style="overflow: auto; width: 100px; height: 60px;">', '<img class="myclass" src="http://l.yimg.com/a/i/brand/purplelogo/uh/us/ydn.gif">', '</div>', '</td></tr></table>' ]; y.one('#content_panel').setcontent(html.join('')); y.one('#toggle').set('disabled', false); }); </script> </head> <body> <div id="content_panel"></div> <button id="toggle" disabled="disabled">toggle</button> </body> </html>
i had same problem in project. browser defect , has nothing yui.
we had display large number of icons on page , it's slow find , set style.display every icon element, decided use yui's stylesheet.
thing works ie when page first loads, still gives performance gain. if display property changes after page loads, have fall slow approach: find icon elements , set style.display one-by-one.
anyway, came , works ie7 , ie8 compatibility-view:
_displaychange : function(classname, enabled) { this._stylesheet.set('.' + classname, 'display:' + (enabled ? '' : 'none')); if (util.browserinfo.ie) { // find dom elements classname if haven't done ... util.each(this._domelementslookup[classname], function(el) { el.style.display = 'none'; //need ie quirk el.style.display = enabled ? '' : 'none'; }); } }, note above had set style.display twice otherwise won't work first time toggle display.
Comments
Post a Comment