Geek Answers Handbook

Strange vertical line above 965 pixels with border radius in Safari

I noticed that if I have a div with a width of more than 965 pixels and a border radius less than all 4 corners, there is a wandering vertical line in the div. Here's the jsFiddle link ... http://jsfiddle.net/Z3vFp/4/ . Please note that this only happens in Safari. Any thoughts? Also note that a threshold of 965 pixels may vary slightly in jsFiddle.

EDIT: I'm on a Macbook Pro with a Retina display. Think this is rMBP thing?

EDIT 2: Here's the jsFiddle screencap. http://i.imgur.com/0rqSS.png

+7
source share
3 answers

add -webkit-background-clip: padding-box;

 .foo { width: 966px; height: 50px; background-color: lightgray; padding: 25px; border-bottom-right-radius: 12px; border-bottom-left-radius: 12px; -webkit-background-clip: padding-box; }​
+10
source

I observed this issue on my 13-inch Mac Book Pro (OSX 10.8) with Safari version 6.0 (8536.25), so it has nothing to do with retina display. This happens when you apply the border radius to only one, two or three corners. The solution is to apply the border radius to all four corners.

This code displays a wandering vertical line:

 <!DOCTYPE html> <html> <head> <style type="text/css"> body {background-color:red} #myBox { width: 960px; height: 300px; background-color: white; border-top-left-radius: 20px; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; margin: auto; } </style> </head> <body> <div id="myBox"> </div> </body> </html>
0
source

I get it even if all four corners are set, for example: 5px

the question arises: do not use the boundary radius, because there is an error in the Apple safari - or wait until the apple will sort it

I expect to wait until the apple is sorted out - it serves rich people, while we peasants must suffer from PC

~ (this is a joke before breaking WW3)

-one
source

More articles:


All Articles