图层滑块 - 盒子阴影窗口在 iPhone/iPad 上不起作用答案

【问题标题】：Layer Slider - Box Shadow Window not working on iPhone/iPad图层滑块 - 盒子阴影窗口在 iPhone/iPad 上不起作用
【发布时间】：2014-11-25 09:58:04
【问题描述】：

我创建了一种“窗口”，可以滑动以显示更多图像，请参阅 - http://sysmarketing2014.squaresystem.co.uk/

它似乎适用于所有浏览器（除了 IE8 向下 - 我也可以修复它），甚至适用于 Windows 手机和机器人。它也适用于 Safari iPhone 用户代理。

但它似乎无法在我的 iPad 或 iPhone 上运行……它们都在运行 iOS8

有什么想法吗？

【问题讨论】：

标签： ios css iphone slider

【解决方案1】：

我已经解决了这个问题，它与 iOS 上的 box-shadow 有关。

iOS 设备不会渲染散布大小为 2000 像素的盒子阴影。我发现我能输入的最大数字是 850px 左右。

似乎是 iOS 特有的问题

.ls-slide .peep {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 0 1000px;
  z-index: 100;
}
.ls-slide .peep:after {
  content: ' ';
  position: absolute;
  top: 10%;
  border-radius: 100%;
  width: 300px;
  height: 300px;
  box-shadow: 0 0 0 2000px #72B626, inset 6px 6px 30px -4px #000;
  -webkit-box-shadow: 0 0 0 2000px #72B626, inset 6px 6px 30px -4px #000;
  -moz-box-shadow: 0 0 0 2000px #72B626, inset 6px 6px 30px -4px #000;
  margin: 0 auto;
  left: 0;
  right: 0;
  z-index: 200;
}


.is-ios-device .ls-slide .peep:after {
  -webkit-box-shadow: 0 0 0 850px #72B626, inset 6px 6px 30px -4px #000;
}

我更改了点差值并解决了问题。

【讨论】：