Tuesday, February 4

Internet Explorer 11 Phantom Text Bug

Internet Explorer has always been a source of strange browser rendering bugs; while it's getting better with each release, you can still find some curious issues in the latest release (IE11).

Scroll Down

We don't typically post about the technical side of web development; there are numerous valuable resources for that information all over the web, many of which that we use daily. However, an exception was made for this particular bug as it appears to be rare enough that it hasn't appeared in any of the usual channels. The solution is also completely unintuitive, so hopefully someone can benefit from this in the future.

 

It happened on one of our clients' blog listing page. The title of the posts were being inexplicably duplicated above themselves, replacing each posts date. We knew it was a rendering issue (the source html and css were correct, and it rendered properly in most browsers), we just didn't have any idea what was causing it. We tried the whole suite of browser/OS combinations available on BrowserStack (which we use for a lot of our browser compatibility testing), and none of them had the problem we were looking for, including in IE11. Thankfully, our office Windows 7 machines were seeing what the client was seeing:

 

internet+explorer+11+phantom+text+bug, website+development

 

That was the problem, and it had us stumped for a bit. Removing any of the fields meant that whatever the current second field was was duplicated instead of the title. There was no obvious cause for what we were seeing. The HTML output was a standard MuraCMS content list, which used a definition list <dl> for the parent, and multiple <dt> and <dd> elements for the content.

 

We finally found the issue when we started randomly unchecking various element styles with IE11's element inspector developer tool. The culprit was the "border-bottom" style on the <dl> element for each post. Removing the border from our stylesheet removed the duplicate text. No this doesn't make sense, especially not in a modern browser, but such is the nature of web development.

 

The blog working as intended (minus a bottom border):

internet+explorer+11+phantom+text+bug, website+development