图层滑块 - Box Shadow Window无法在iPhone / iPad上运行

Question

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

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

它似乎不适用于我的iPad或iPhone但是......它们都运行iOS8

有什么想法吗？

Answer 1

我已经解决了这个问题，它与iOS上的盒子阴影有关。

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;
}

我改变了价差并解决了问题。