Longing to know

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.