Firefox and the magical text-overflow:ellipsis z-index
A while ago I received a strange bug report for a site I’d been working on. The report mentioned dots appearing on top of a dropdown menu when it was expanded. I had a look in Safari, could not see any dots, but then tried Firefox. And sure enough, there were sets of three dots in the dropdown menu.
It didn’t take long to find the cause, fortunately. Just below the dropdown menu was a list of news items whose text-overflow value was set to ellipsis. The dots in the dropdown menu were the ellipsis characters peeking through, or being rendered on top of, the dropdown’s background.
After checking in a lot of different browsers I can only replicate this in Firefox. Apparently the ellipsis rendered by text-overflow gets a z-index that is higher than the element it is applied to. It also appears above any absolutely or relatively positioned elements that come before the element with text-overflow in the source order, unless those elements have a z-index value greater than 0. Open the Firefox and the magical text-overflow:ellipsis z-index demo page to see an example.
Luckily this was easy to fix in my case by giving the positioned element (the dropdown menu in this case) a z-index. You could argue that you should always do that to make sure anything that is absolutely positioned gets rendered on top of other elements (if that is in fact what you want), but then it shouldn’t always be necessary.
After reading the specification for text-overflow, and given that no other browser renders the ellipsis on top of positioned elements, this looks like a Firefox bug to me.
Yeah, this is a pretty minor thing, but in case you too get a bug report mentioning mysterious dots in Firefox, you know what to look for now.
- Previous post: Replacing images when printing
- Next post: How to proportionally scale images that have dimension attributes