在 iPhone 和 iPad 版 Chrome 上进行 translate3d 期间图像消失

Question

我有一个为移动图片查看而创建的 coverflow 类型图像库。第一次迭代在这里： http: //codepen.io/jasonmerino/pen/Fsloq。

我已经连接了触摸事件，对于 iPhone 和 iPad 上的移动 Safari 来说一切似乎都很顺利，但是当我在 iPhone 或 iPad 上的 Chrome 上查看它时，图像在 CSS translate3d 的一部分中消失，该部分将图像移动到两侧。

我已经添加了-webkit-backface-visibility: hidden;包含滑动器的所有标记，但这并不能修复我的图像正在执行的消失行为。

我在这里缺少什么？任何帮助，将不胜感激。谢谢！

Answer 1

问题出在我删除内联 CSS 的那段代码上translate3d。我现有的代码通过重新分配背景图像来处理删除翻译。

for (var i = 0; i < images.length; i++) {
  $el.images.eq(i).css('style', 'background-image: url(' + images[i].src + ')');
}

在移动 Safari 中这很好，但在 Chrome 中，当我重新分配背景图像时，图像会重新加载，因此会消失。因此，我将代码调整得更加智能和简洁，因此我只从内联样式中删除了翻译。

$el.images.css('transform', '');

事实证明，当您将空字符串作为值传递给 jQuery 中的 CSS 属性时，它们只是为您删除样式，而不是将其保留为空白。有道理，但我以前不知道。

不管怎样，这就是为我解决的问题。