Back to Blogs
Image For Blog

Why isn't overflow: overlay the norm across all browsers


05 Nov 2021

A problem I came across alongside SVG in-built animations not working properly on Firefox was the rule overflow: overlay; not working there. It defaults to auto which doesnt help when you have a clipping animation you would like to just go over the top of other elements without going down a position and a z-index solution. It seems strange that this wouldn't work as a default in Opera also. We all know Edge is a pain but luckily not as much as IE was. Firefox, Edge and Opera seem to be the guys lagging behind on this implementation of the style option.

As you can see in the image above it seems that Chrome and Safari are the only guys ahead of the curve on using this rule. If you're wondering what the difference between overlay and auto is the best way to describe it is that overlay allows content to extend beneath the scrollbar whereas auto doesn't allow it to extend beneath the scrollbar but will shift the content horizontally or vertically accordingly to accomodate the scrollbar.

Not a massive problem I suppose but rather annoying when it was a perfect fix for an SVG animation I have on the homepage of cogs circling mobile phone. If you look at in chrome it works perfectly. Not so much in Firefox although I have disabled that animation for the moment in Firefox until I decide if it's worth pursuing a different avenue of fixing that and hoping they bring the proper SVG built in animations to their browser.

This website was built in SVG animation and CSS3 Animation.

This is an ongoing project to better understand SVG animation across browsers so this website may change often.

For the best experience use Chrome on desktop.