Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

safari and iphone issue with -webkit-box-shadow

safari and iphone issue with -webkit-box-shadow


I have an unordered list which is set to display block. Inside that UL I have 4 li elements which are floating.

There is an issue when displaying it in Safari and therefore on iphone and ipad. The issue is that the inner element is inset slightly by the shadow:

but it displays fine in Chrome

Any ideas??



Problem courtesy of: Phil James


The problem CAN be as follow..

You probably don't saw it coming but do you use a border radius? The chrome version has 1 pixxel padding on the top/left/right side which can output differently on your screen..

underneath can be helpful if you use a browser reset in your stylesheet

This will reset all browsers to the same index and from there start styling and mostly it will work!

Solution courtesy of: Jay Ruben


View additional discussion.

This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

safari and iphone issue with -webkit-box-shadow


Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription