Overflow: overlay doesn't work in firefox
On my website I need to use the css property overflow: overlay for a <div>.
However, it is not rendering in the browser and an inspection of the css in firebug shows that it isn't even there, but it is as it works in Chrome. I havn't tested out safari.
What must I change to get the overflow: overlay css property working?
Thanks
Answer
Possible values for overflow are:
visible
hidden
auto
scroll
See here or here for a discussion of these.
Using any other value in different browsers will yield unpredictable results as they handle the incorrect value differently.
Edit: Following the comment, I've managed to find mention of overflow:overlay here.
overlay is described as:
Content is clipped and scroll bars are added when necessary.
Importantly its also said only to work in Safari or Chrome (ie WebKit).
This item on WebKit bugzilla suggest it is not long for this world in any case:
WebKit currently has a proprietary CSS overflow value called "overlay" which is undocumented and as far as I can tell from reading the code works exactly like "auto".
We should either remove it or rename it to "-webkit-overlay".
Update March 2016
Looks like overflow: overlay hasn't gone away. There are signs of it working it's way into the standards.
The difference between overlay and auto would only be that the scrollbars would appear over the top of the page content, and not cause it to take layout space.