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?
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.
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.
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.
To hide the horizontal scrollbar and prevent horizontal scrolling, use overflow-x: hidden: HTML.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With