While testing a new application that utilizes my multiselect drop-down widget, I noticed some weird behavior with IE11.
This widget does a bit of pre-display rendering to determine the height of the drop-down. Sure, there are ways to estimate/calculate height based on applied CSS, but I render the drop-down off screen (absolutely positioned) for simplicity. An absolutely positioned element that is off-screen, based on Chrome’s rendering, shouldn’t affect the rest of the page. One could argue that fixed position would have been the correct positioning type. At any rate, this is all done on first interaction with the drop-down to determine if there is enough space for the widget to actually drop-down, or if it needs to “drop-up.”
Since I test in Chrome first, most of the time, this worked well. I never saw any weirdness. However, once I switched over to testing in IE11, I noticed that the browser’s scroll bar was appearing after showing the drop-down. The interesting thing is that the HTML and Body elements, according to the DOM inspector, weren’t increasing in height. It’s as if I was getting phantom white space somehow added to the viewport.
This bug, though, lead me to finding my own bugs.
Since I have a watch count helper that counts watches by looking for specific classes on elements, I noticed that the watch count was growing with every click of the drop down. One fix for this was to only render the element once to get its height. My main bug, though, was that I wasn’t disposing of the transient element and removing it from the DOM. I had, effectively, a memory leak. I would have not noticed this if not for IE11’s scroll bar erroneously appearing.
2 thoughts on “Another weird IE11 rendering bug”
Thank you for sharing your experience.
I’m currently working on an AgularJS project and I’m using your multiselect library for the dropdowns. The version I’m using seems to have exactly the same bug as you mentioned above.
Opening the modal that runs the dropdown is very slow and I was just wondering if you have since fixed the bug and where do download the new version? Any help will be highly appreciated.
Thanks once again for the good work!
The latest version in my git repository should have the fix I mentioned. I’ll double check, though.