jQuery Mobile: Fixed for the second issue in #1422 - IE7 locks up in infinite JS resize events#1496
jQuery Mobile: Fixed for the second issue in #1422 - IE7 locks up in infinite JS resize events#1496siromega wants to merge 2 commits intojquery-archive:masterfrom
Conversation
…finite JS resize events. The fix is to change how the detectResolutionBreakpoints function adds and removes classes from $html. The problem is that removing and adding those class names triggers the resize event again, resulting in infinite resize events. The solution is to come up with a new way to change the class names - by copying them off $html, adding and removing them locally in a variable, then checking to see if the class names have changed and applying the changed className string. Note that this would not be thread safe (any changes to $html.className would be lost if it were made between the read and the write) but since JS isn't threaded so we don't have to worry about that.
|
Thanks for the pull request, we'll take a look soon. |
|
You should take a look at http://docs.jquery.com/JQuery_Core_Style_Guidelines and format your changes according to that. Could you also comment the code to make it easier to figure out whats going on? |
|
Finally managed to get back on the project I'm using this for, and it seems there is still a bug in the code with IE7 desktop. If you size the window right at 320px wide, it'll go on forever if the content of the window requires a scroll bar. What appears to happen is that it'll run through detectResolutionBreakpoints() once, with a window width of the full window (no scroll bar, so 320px). Once it adds the classes to $html that causes IE to want to render it again. So it comes back through detectResolutionBreakpoints() but this time it has a scroll bar on the side, reducing the window to 302px (18px wide scroll bar). This changes the classes (since it is below the 320px hit point), which causes another resize event, and on to infinity. I've been trying to figure out a way to not have it assign classes that first time through when there is no scroll bar but there is no good way to detect the presence of an actual scroll bar. Do we need to assign these as classes? I looked through the rest of the jQuery Mobile code and didn't find much as far as min-width-* and max-width-* CSS class references. Can we place them on a data- attribute (e.g. html.data-resolution)? This way they wont trigger a render task in IE. |
|
IE always has a scrollbar. |
|
After some more debugging, it turns out IE wont have the scroll bar when its in an frame/iframe and the content fits inside the frame provided. Though I'm sure thats not a common case for jQm, I'll just address that on my own through manually setting overflow/overflow-x for the HTML element for IE to replicate what IE does on its own when its not in a frame. |
|
+1 |
Fixed for the second issue in #1422 - IE7 locks up in infinite JS resize events when the window is sufficiently small ( <? 320px).
The fix is to change how the detectResolutionBreakpoints function adds and removes classes from $html. The problem is that removing and adding those class names triggers the resize event again, resulting in infinite resize events. The solution is to come up with a new way to change the class names - by copying them off $html, adding and removing them locally in a variable, then checking to see if the class names have changed and applying the changed className string.