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

Question

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

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

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

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

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 属性时，它们只是为您删除样式，而不是将其保留为空白。有道理，但我以前从来不知道。

无论如何，这就是我解决问题的原因。