Hi! As you can see on the image, there's a strange behaviour in safari 6 with round corners
{ border-radius: 5px 5px 5px 5px; }
when hovering over the elements there is a thin line that's building up when hovering more and more times... The first and second link wasn't hovered over, and you can see different lines caused by hovering mouse over the elements a few times...
Is that just a bug in safari?
I haven't seen this exact behavior before, but I've seen similar. I assume you are on a Retina MBP? and certainly on Mountain Lion. Safari is occasionally having issues with border-radius and virtual resolution (which is how the retina display works).
Try quitting safari, changing your resolution, and opening it again. If it looks better at first, then you'll just have to wait for a fix from Apple.
In the meantime, you might have some luck making sure all border styles make it hidden:
border-color: transparent;
border-style: none;
border-width: 0;
Hope that helps!
-Mike
This post may answer your question CSS rounded corners bug in Safari?.
Try to use:
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
instead of:
border-radius: 5px 5px 5px 5px;
Related
I have a problem with rendering of corners of elements, which have border-radius.
I use the following code and it works in all major browsers on Windows, including Safari.
border: 1px solid #555;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
Now my client has a Mac and a Safari browser and the following are screen shots of the ugly borders rendering, which is the problem.
Does anyone know what is the reason of such rendering ? (The original page)
You should try for Mac Safari
-webkit-background-clip: padding-box;
This looks like a recently introduced bug that manifests on both iOS6 and Safari 6. Has anyone else gotten bitten by this?
What might be a work around? What if we really actually needed that box shadow to have spread=0? Right now we can get the shadow to render by setting the spread value to -1px or 1px
FIDDLE: http://jsfiddle.net/uCseS/2/
It seems like a bug indeed. However, if you use rgba notation for the background-color, the shadow reappears.
img{
background-color: rgba(255,255,0,0);
box-shadow: #000 2px 2px 10px 0px;
-webkit-transform: translate3d(2px, 5px, 0px);
}
http://jsfiddle.net/willemvb/KuhQp/
I have a typical link on a page. On hover, the link receives a border color and border-radius. In Safari 6, I am noticing that when the mouse leaves the link there is a very faint border color left behind. If you hover again over the link, the border gets darker and darker in some cases, even though the border-color is not set. If border-radius is not set, the issue does not occur.
I cannot repeat the issue in Firefox or Chrome (for Mac). The simplest fix I found was to specify a solid or transparent border color for the base anchor style. Could this just be a Safari rendering bug?
Link for the rendering issue: http://jsfiddle.net/zafer/msnak/4/
Try making the border-radius value equal to the padding on the anchor element and see if that doesn't help. I had the same problem in Safari 6 as well and that seemed to have fixed it.
So your CSS code would look something like this:
a {
display: inline-block;
padding: 15px;
border-radius: 15px;
}
a:hover {
background: #004184;
}
just ran into same issue and found that using even values (2,4,6,..) as radius fixed it for me, like so:
a{
color: white;
padding-right: 9px;
padding-left: 9px;
}
a:hover{
background-color: green;
border-radius: 4px;
}
regardless of different padding values.
The background-clip solution did fix the problem for me, check the details on https://stackoverflow.com/a/3447130/1200097 it is possible that your properties need to be reordered.
Opera has had support for box-shadow since v10.5, but it doesn't work on an input element.
input[type=text] {
background-color: #fff;
border: 1px solid #a0a0a0;
box-shadow: inset 1px 1px 1px #d2d2d2;
-o-box-shadow: inset 1px 1px 1px #d2d2d2;
}
<input type="text" name="test" />
This code works fine on Chrome and Firefox, I'm using Opera 11.01 on OSX 10.6. Can anybody help fix this?
It looks like a bug in Opera (I just reported it). You can use background: transparent; and it will work (assuming that the background of the container is also white).
Also, there's no -o-box-shadow, Opera supported the nonprefixed box-shadow property since it implemented it.
It does appear to be a bug, I however had a form where it was working and couldn't figure out why - stripping it down it appears that adding border-radius makes it appear (if you still need the background color and can't use Lea's solution) - if you don't want obvious rounded corners you can use a 1px radius
input[type=text] {
background-color: #fff;
border: 1px solid #a0a0a0;
box-shadow: inset 1px 1px 1px #d2d2d2;
border-radius: 1px;
}
Opera is ignoring many css properties on input elements. Box-shadow is not the only one. Text-shadow or text-transform are also ignored.
Using a button element istead of an input can be a solution when you deal with buttons.
Also, if you need background-color additional to Lea's solution, you can add one more inset shadow, like so
box-shadow: inset 0 1px 4px -1px rgba(0, 0, 0, .7), /*actual shadow*/
inset 0 0 100px 0 #fff; /*just white background*/
CSS3 -webkit-transition is choking on multiple box-shadow values and text-shadow values. (Chrome & Safari)
More specifically, I have two scenarios...
I have text has a document heading that has three text-shadows (for appearance of depth). I am also using the -webkit-transition rule to change the color of the text-shadow on hover so that it appears to glow on hover.
I have links which I'm using the box-shadow rule on in the same way as above, with three values for depth effect. Also using -webkit-transition here to change the color of the buttons and text for a hover effect.
The Problem: For both instances above, when hovering over the elements webkit appears to render the transition as one at a time, so the values don't all fade into their new values simultaneously. Instead, they appear as each one is rendered - one after the other, and it is a very awkward transition as you'll see.
I have several instances, and here are links to some of them:
(make sure to view in Chrome or Safari)
-Text-shadow transition on :hover for page h1 ("GIFT of HEALING" text): http://cure.org/goh
-Box-shadow transition on :hover for 1st slide call to action ("Read More" button): http://cure.org
-Box-shadow transition on :hover for footer nav links (About, Rods, etc): http://tuscaroratackle.com
Finally, here's a sample of the code I'm using:
(Not from any site, just an example I built for this question; see it live here: http://joelglovier.com/test/webkit-shadow-transition-bug.html)
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
ul {
overflow:hidden;
width:500px;
height:auto;
margin:50px 100px;
background:rgba(0,0,0,.4);
border:1px solid rgba(0,0,0,1);
-webkit-border-radius:10px;
-webkit-box-shadow:inset 0px 0px 5px rgba(255,255,255,.5),0px 2px 10px #6e5e4c;
-webkit-transition:all .5s ease;
}
ul:hover {
-webkit-box-shadow:inset 0px 0px 10px rgba(255,255,255,.5),0px 2px 10px #92d400;
}
li {
display:inline-block;
}
a:link,a:visited {
float:left;
display:block;
padding:6px 10px;
margin:10px 20px;
font:bold 18px/22px Tahoma,Helvetical,Arial,sans-serif;
text-decoration:none;
color:#000;
background:#92d400;
-webkit-border-radius:4px;
-webkit-box-shadow:inset 1px 1px 0px #b7f52f,0px 4px 0px #5c8500,0px 3px 10px #000;
-webkit-transition:all .5s ease;
}
a:hover,a:focus {
background:#198c45;
-webkit-box-shadow:inset 1px 1px 0px #1ac65c,0px 3px 0px #046228,0px 3px 10px #fff;
}
a:active {
position:relative;
top:1px
}
</style>
</head>
<body>
<ul>
<li>link 1</li>
<li>link 2</li>
</ul>
</body>
</html>
So the question here really is is there any way to prevent that ordered rendering, such as using different syntax in my CSS? (such as a specific order of the multiple box-shadow values, or using multiple box-shadow declarations instead of adding them all into one rule?)
05/09/2011 UPDATE: The bug has been reported to Webkit (see Husar's comment below). Also, I see that recent builds of Chrome (specifically my current 10.0.648.205 version) is rendering a smoothe transition now, effectively eliminating the bug. Safari however (version 5.0.5 (6533.21.1)) still displays the buggy rendering.
Apparently this is just a bug with webkit rendering, and there is no apparent fix.
I've also noticed that when you use jQuery, for example, to simply fade text in or out, WebKit "hiccups." So basically, I'm going to go out on a limb and say that I don't think your particular styles have anything to do with it. I could be completely wrong. If you find out what the deal is, I'd love to hear a solution because I too have run into this annoyance a time or two.
this could help to fix this problem on rendering for hovering events
-webkit-transform: translateZ(0px);
-moz-transform: translateZ(0px);