Overflow: Overlay Doesn't Work in Firefox

Overflow: overlay doesn't work in firefox

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.

See here for the discussion.

Css overlay working in Firefox but someting is wrong in Chrome

Thanks to setek, I have found a solution, so I'll post it here in case someone else faces the same problem.

Overlay opacity doesn't work very well with the latest Chrome update (33), so we have to put opacity: 0.0X; where X is some number, instead of opacity: 0;

I found that code in my js file and replaced

overlay.fade('in');

with

overlay.fade('in'); overlay.setOpacity(0.01) ;

Not sure if anyone has the same javascript file, but this is what helped me to solve the problem.

Overflow hidden doesn't work on firefox, but does work in IE and chrome

Overflow hidden is not working in every scenario. Often a fixed width is required or a vendor specific prefix is needed, e.g. -moz-overflow:hidden.

Especially Firefox and Android browsers have problems with this solutions and I strongly recommend to try other ways like clip or rect to build fixed sized frames.

http://www.w3schools.com/cssref/pr_pos_clip.asp

img {
    position: absolute;
    clip: rect(0px,60px,200px,0px);
}

CSS Overflow: overlay. Is it deprecated? How can I replace it?

It is deprecated according to Mozilla css docs

Overlay a div on HTML 5 video in firefox doesn't work?

check this snippet.

.pofvv{     position:relative;     width:100%;     height:100%;     background:black;     z-index:1;    }    .overlay{     position:absolute;     height:60px;     width:100%;     bottom:0px;     background: white;    z-index:2147483647;      top:50%;    }

<video class="pofvv" id="pofvv">  <source src="wajid.MP4" type="video/mp4"> </video><div class="overlay"></div>