Reputation: 411
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?
Upvotes: 12
Views: 6947
Reputation: 1776
One single rule didn't helped in my case. At the end I fixed adding ALL these rules:
-webkit-appearance: none;
border:0;
border-radius: 1px;
height: 1px;
In particular setting also the height
.
Upvotes: 0
Reputation: 3389
I was using:
border-radius: 100%;
box-shadow: 0 0 0 20000px rgba(255,255,255, .6);
and the shadow wasn't appearing on iPad(iOS 11): Safari and Chrome.
I tried all the other answers but with no luck.
The solution for me was to reduce the spread from 20000px
to 922px
. This was the max value that I could use so the shadow would appear.
Upvotes: 0
Reputation: 31
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.
Upvotes: 3
Reputation: 762
I had a similar issue on iPad mini w/ iOs 7.0.3 the problem appeared both in safari and in chrome
I found on another thread this solution:
"Try adding -webkit-appearance: none;
, because iOS tends to mess up forms."
and it solved the problems !
Upvotes: 2
Reputation: 4328
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;
Upvotes: 8
Reputation: 1
I had the same issue on iPad 4 with iOS7. When I set CSS box shadow for an element it appears as intended on iPad portrait view. But when I rotate the iPad to landscape view the box shadow gets disappear.
I tried StrandedPirate's solution - adding 1px border radius to the element and it worked! This solution might not be applicable for all cases, but for my case it is adoptable.
Upvotes: 0
Reputation: 545
Same issue with iPad Air / iOS 7 :(
Setting -webkit-appearance
didn't help, neither did border-radius
.
I used the following CSS to fix it (it lets you use the spread setting on other browsers, and overrides for webkit/iOS only):
.box_shadowed
{
box-shadow: 2px 2px 4px 2px #ccc;
-webkit-box-shadow: 2px 2px 4px #ccc;
}
Upvotes: 0
Reputation: 1103
Something similar here. Applied box-shadow to image elements. It shows fine at zoom=1. But if you zoom in, it disappears on iPad 3 with iOS 7.
CSS Code used:
#photostrip > img {
-webkit-box-shadow: 0px 6px 8px rgba(0,0,0,0.33);
-moz-box-shadow: 0px 6px 8px rgba(0,0,0,0.33);
box-shadow: 0px 6px 8px rgba(0,0,0,0.33);
}
Upvotes: 0
Reputation: 892
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!
Upvotes: 2