框架阴影在Retina iPad上的iOS 7中的WebKit中传播错误
我发现在iOS 7的WebKit中似乎是一个错误,但仅限于iPad 3和4,这让我相信它与硬件相关。
错误:如果我将扩散值(第四个值)添加到CSS框阴影,整个阴影消失。 我在这里提出了一个例子。
任何人都可以在iPad 3和iPad 7上确认此错误吗?
仍然是IOS 7.0.4中的一个问题。
添加一个像素边框半径以强制浏览器以横向模式和缩放时渲染阴影。
border-radius: 1px;
更奇怪的是我正在研究完全相同的问题。
如果你使用插图,你可以定义你的传播,然后它工作正常!
另一个很好的事实是,当你将ipad变成横向模式时,你的阴影将会消失。
这是一个非常烦人的错误!
我有一个类似的问题在iPad mini w / iOs 7.0.3上,问题出现在safari和chrome中
- 无论缩放如何,都没有出现带有插入框阴影的输入字段
- div drop shadow出现,但当放大时变为一条线并进一步放大也隐藏了该线。
我在另一个线程上发现了这个解决方
“尝试添加-webkit-appearance: none;
,因为iOS往往会搞乱表单。”
它解决了问题!
这里有类似的东西。 应用框阴影到图像元素。 它在zoom = 1时显示正常。 但如果你放大,它会在iOS 3的iPad 3上消失。
使用的CSS代码:
#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); }
与iPad Air / iOS 7相同的问题:(
设置-webkit-appearance
没有帮助, border-radius
也没有帮助。
我使用以下CSS来修复它(它允许您在其他浏览器上使用spread设置,并仅覆盖webkit / iOS):
.box_shadowed { box-shadow: 2px 2px 4px 2px #ccc; -webkit-box-shadow: 2px 2px 4px #ccc; }
我在iOS4的iPad 4上遇到了同样的问题。 当我为元素设置CSS框阴影时,它在iPad纵向视图上显示为预期。 但是当我将iPad旋转到横向视图时,盒子阴影就消失了。
我尝试了StrandedPirate的解决方案 – 为元素添加1px边框半径并且它有效! 此解决方案可能并不适用于所有情况,但对于我的情况,它可以采用。
我有同样的问题,并添加border-radius:1px
来修复它。
我们在处理safari和/或iPad问题(或两者)时找到了一个很好的经验法则。 在元素或类上放置以下规则以强制进行硬件渲染。
transform: translate3d(0,0,0);
这解决了我在iPad上渲染阴影(用作扩展值的边框)与其他设备相同的问题。