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.
Copyright © Roger Johansson