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

I have created a sort of 'window' that slides across to reveal more of the image, please see - http://sysmarketing2014.squaresystem.co.uk/

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

It seems to work across all browsers (apart from IE8 downwards - which I could also do with fixing) and even works on Windows phones and androids. It works in the Safari iPhone User Agent also.

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

It does not seem to be working on my iPad or iPhone however... they are both running iOS8

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

Any ideas?

有任何想法吗？

1 个解决方案

#1

I've solved the issue, it was to do with the box-shadow on iOS.

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

The iOS devices would not render the box-shadow with a spread size of 2000px. I found that the largest number I could input was around 850px.

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

Seems to be a problem specific to iOS

似乎是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;
}

I changed the spread value and problem solved.

我改变了传播价值，解决了问题。