Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

overflow:hidden works in Firefox but not in Chrome. Why?

Tags:

I have been trying to play a bit with the CSS3 and build a Netscape logo purely out of CSS3 for training.

Here is the link:

http://alonbt.com/css3/netscape/

The thing is: In Firefox all looks well, but in Chrome something goes wrong. I assume this is the overflow:hidden I have - in Firefox it works but Chrome doesn't seem to render it well.

Any suggestions bout what might be the problem?

like image 591
Alon Avatar asked Aug 08 '11 00:08

Alon


People also ask

What happens if we use overflow hidden?

hidden - The overflow is clipped, and the rest of the content will be invisible. scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content. auto - Similar to scroll , but it adds scrollbars only when necessary.

How can I hide the overflowing content?

Set the div with a width or height, (otherwise it won't know whether something is overflowing). Then, add the overflow:hidden; CSS property-value pair.

What causes overflow in HTML?

One of the most common causes of overflow is fixed-width elements. Generally speaking, don't fix the width of any element that should work at multiple viewport sizes.

Does overflow hidden prevent scrolling?

To hide the horizontal scrollbar and prevent horizontal scrolling, use overflow-x: hidden: HTML.


1 Answers

I've detailed this issue here: http://tech.bluesmoon.info/2011/04/overflowhidden-border-radius-and.html

In particular, you're being hit by https://bugs.webkit.org/show_bug.cgi?id=50072

The issue shows up in Safari too.

like image 170
bluesmoon Avatar answered Nov 03 '22 01:11

bluesmoon