Why is YUI StyleSheet not toggling this image correctly in IE <= 7
What's the issue?
When you toggle the image by setting or unsetting "display: none" - 开发者_开发技巧the first time it goes invisible, but leaves space allocated - the second time it does not become visible
How to reproduce the issue?
When using IE 7 (or less) or IE 8 in compatibility mode, open the HTML in the GIST: - Click the toggle button, image disappears, but the scroll still thinks the image is there - Click the toggle button again, the image does not reappear
What am I trying to do?
I am working on a project which displays a large amount of user data, and next to the user data we display icons - the content of the page is rendered dynamically based on AJAX calls. And there is some code (which gets invoked when you check/uncheck some display options) that make these icons invisible/visible. The users are displayed in a large grid layout - so tables were necessary. As a performance enhancement, I started to use the YUI StyleSheets to make a large number of icons of the same type disappear/reappear.
What do I want to know?
What is the root cause to this display issue in IE?
What do I NOT want to know?
I don't want to know how to change the DOM structure to fix this issue. I already know removing the dummy table around the DIV makes the issue go away. Also if you put the html directly into the content_pane element without dynamically generating it, the issue goes away there too. Oh and FF/Chrome work fine too (did I even need to 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 exactly the same problem in my project. This is a browser defect and has nothing to do with YUI.
We had to display a large number of icons on the page and it's very slow to find and set style.display for every icon element, so we decided to use YUI's stylesheet.
The good thing is that it works for IE when page first loads, so it still gives you performance gain. If some display property changes after page loads, then you have to fall back to the slow approach: find all the icon elements and set style.display one-by-one.
Anyway, this is what I came up with and it works for IE7 and IE8 compatibility-view:
_displayChange : function(className, enabled) {
this._styleSheet.set('.' + className, 'display:' + (enabled ? '' : 'none'));
if (Util.browserInfo.ie) {
// find DOM elements with the className if haven't done so
...
Util.each(this._domElementsLookup[className], function(el) {
el.style.display = 'none'; //need this for the IE quirk
el.style.display = enabled ? '' : 'none';
});
}
},
Note above I had to set style.display twice otherwise it won't work the first time you toggle display.
I suspect it's a browser bug, but you can file the ticket with YUI and we'll get to the bottom of it. http://yuilibrary.com/projects/yui3/newticket
加载中,请稍侯......
精彩评论