Box shadow spread bug in WebKit in iOS 7 on Retina iPads

Question

I've found what seems to be a bug in WebKit for iOS 7, but only on iPad 3 and 4, which leeds me to believe it's somehow hardware-related.

The bug: If I add the spread value (the fourth value) to CSS box shadows the whole shadow disappears. I've put up an exampel here.

Can anyone else confirm this error on iPad 3 and 4 with iOS 7?

Answer 1

Still an issue in IOS 7.0.4.

Add a one pixel border radius to force the browser to render the shadow in landscape mode and while zooming.

border-radius: 1px;

Answer 2

We've found a good rule of thumb when dealing with safari and/or iPad issues (or both). Put the following rule on the element or class to force hardware rendering.

transform: translate3d(0,0,0);

This solved my problem getting a shadow (used as a border with the spread value) to render on an iPad the same as other devices.

Answer 3

I had a similar issue on iPad mini w/ iOs 7.0.3 the problem appeared both in safari and in chrome

1. input field with inset box shadow didn't appear at all regardless the zoom
2. div drop shadow appeared, but when zoomed in changed to a line and further zoom in hide the line as well.

I found on another thread this solution:

"Try adding -webkit-appearance: none;, because iOS tends to mess up forms."

and it solved the problems !

Answer 4

It is even more strange i was looking into the exact same problem.

If you use inset you can define your spread and then it is working fine!

an other fine fact is that your dropshadow will be gone as you turn your ipad into landscape mode.

This is a quite annoying bug!