Adrian B
Adrian B

Reputation: 411

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

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

Answers (10)

Diego D
Diego D

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

Barnee
Barnee

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

Jon Nemeth
Jon Nemeth

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

Ilana Hakim
Ilana Hakim

Reputation: 762

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 !

Upvotes: 2

TugboatCaptain
TugboatCaptain

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

Yunfei
Yunfei

Reputation: 1

I had the same problem and added border-radius:1px to fix it.

Upvotes: 0

Nilaksha
Nilaksha

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

cometfish
cometfish

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

André Fiedler
André Fiedler

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

Mick Feller
Mick Feller

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

Related Questions