HTML5-placeholder-polyfill icon indicating copy to clipboard operation
HTML5-placeholder-polyfill copied to clipboard

IE bug: dynamic layouts do not properly update the position of placeholder

Open MarcusPope opened this issue 13 years ago • 2 comments

IE requires two changes to fix this problem. First, the resize event needs to be attached to window instead of document. And the second fix is more for performance versus a requirement - but IE will call the resize event repeatedly for virtually every pixel change in the window dimension while the user resizes the browser. Here's the code to avoid that problem:

... //line 157
var timerid = null;

$(window).bind("fontresize resize", function() {             
    if (timerid) clearTimeout(timerid);
    timerid = setTimeout(function() { 
        positionPlaceholder(placeholder,input);            
    }, 500);
});

Not sure if fontresize can be attached to window so you'll want to test that, but the common timerid shouldn't conflict between the two events. You can also get away with adjusting the timeout duration to 250ms if you prefer a faster adjustment after the last pixel adjustment but I think on older systems with higher than normal cpu usage anything below 200 risks running the positionPlaceholder repeatedly.

MarcusPope avatar Oct 31 '12 20:10 MarcusPope

I tried to reproduce the issue you mentioned about IE not triggering the resize on the document. I can't reproduce that though. Don you have a testcase for that? Also: Which Version of jQuery are you using and which IE Version did you have this issue with?

I like your idea of throttling the window resize. I'll look into that.

ginader avatar Nov 29 '12 17:11 ginader

"IE requires two changes to fix this problem. First, the resize event needs to be attached to window instead of document. "

I am having the same problem. Using jQuery 1.9.1 on IE 8. The Demo site works correctly (but might be using an older jQuery and/or polyfill).

nathansamson avatar May 28 '13 12:05 nathansamson