Safari and Transparent Borders
I had noticed this little bug on my own site. In the footer, there's a 5px border with the colour set using rgba. In Safari, it's as if the semi-transparent borders overlap each other in the corners and the values are compounded. This creates little squares in the corner of my squares.
Not quite what you'd expect. Firefox and Opera (10.5; I didn't test in 10.10) render this as you'd expect, with a consistent colour surrounding the block.
In testing some other border handling, I noticed that the overlapping only seemed to happen when the border colour was the same on all sides. If the border colour is the same but the border width is different, you'd still get the overlapping values in the corner.
Now, how far apart do the colour values need to be before it reverts to a different way of rendering the borders: generally 3/1000th of a difference.
With the following CSS, the borders render closer to expected in Safari:
border-color:rgba(0,0,0,.201) rgba(0,0,0,.204);
You can still notice a slight line at each edge as I suspect some anti-aliasing is at play. This is consistent between both Safari and Chrome, since they're both based on Webkit.
Conversation
I wonder if you would have the same issues with a transparent png and a border-image. It seems that the different colours triggers a different border corner rendering behaviour. Thanks for sharing this :)
There also seems to doubling of the corners on rectangles in all implementation of the <canvas> element, from what I've seen. Seems to be a common issue.
That's interesting... has this been reported to the Webkit team? I can't find anything in their Trac.
Curious as to how it would look with border-radius...
@Mark Story: that'd be an interesting thing to try. Alas, I'm too lazy now to try. :)
@Simon: I hadn't checked, actually. I should probably do that.
@Travis: Once a border-radius is applied, it's no longer an issue. However, you now have rounded corners! :)
What about applying a -webkit-border-radius:0;? That might change the rendering of the borders but still keep them square. Just a guess.
@Anthony Short: And that guess would be incorrect. :) I tried and sadly, a border-radius of 0 does nothing.
Hmmm...very interesting find, I'll have a look at it and see if I find something.
Yep, I got it, time for a new approach:
#flickrfaves img {background:rgba(51,51,51,0.2);
padding:5px;
}
But a very weird error indeed...
Can you not use opacity on solid borders instead and set only the border styles on a wrapper SPAN?
Also Google chrome has the same issue, uses the same render engine, not so?
I’ve noticed this behaviour myself - never had the inclination to investigate further though. Thanks for the simple solution!
I noticed the same thing on a box I created the other day. I'd say it's definitely a bug, as I can't imagine it's the desired affect in most circumstances (although I kind of liked it and kept it in my case). Interesting that the 3/1000th difference is imperceptible (at least to me), which should make for a good short term workaround.
I recently came across the same thing, will definitely try this work around, have you noticed a difference in the other browsers after applying it?
Thanks for sharing
@Johan: it doesn't matter where you apply the border, the problem will still occur. And yes, as mentioned in the last sentence of the article, the same thing applies to Chrome.
@Pablo Boerr: all other browsers apply the border as expected, with no artifacts at the corner.
Thanks jonathan.
If your
border-sizeis larger than yourborder-radiusyou will run into trouble in Safari :<img src="http://farm3.static.flickr.com/2799/4302596285_4e152ce6f5_o.png" width="302" height="232" alt="Transparent border issues in Webkit" />
this is the CSS used to produce the weird inverted corners
I wonder what's going on there...
Yes this does seem a little off, if you were to build it out of 4 borders, then yes it would be right. (that's what it is rendering afaik).
If it were to be 1 border it should render it as a whole, not as 4 separate edges).
I honestly thought that was part of the design aesthetic you had created for the footer. Thanks for highlighting the bug, though!
It's a bit of a tradeoff but why don't you apply solid border color instead, small squares would go away and everybody would be satisfied :) The difference will be the same as with your technique of different colors.
is it bad that i kinda like the how webkit is rendering this? i'd call it progressive enhancement, have a shot of tequila and call it a day!
;)
Thanks Snook,
this posting for transparent png and a border-image has given clear concept and thanks again for sharing code.
Just found that bug today, while writing an article about RGBa colors.. pretty weird and something the Webkit should fix as soon as possible.
Jonathan, please submit this as a bug:
https://bugs.webkit.org/
Thank you.
thanks DEREK ANDERSON. you were right on -- solved my problem!