Tuesday, May 26, 2015

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.

Read full post

Posted in , .

Copyright © Roger Johansson

456 Berea Street

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru

No comments:

Post a Comment