iPad Pro Retina 上的 CSS 不透明度过渡故障

Question

我在 iPad Pro Retina 上遇到了基本 css 不透明度过渡的问题

.fading-element {
    transition: opacity 1s;
    opacity: 1;
}

.fading-element.fade {
    opacity: 0;
}

这在其他任何地方都可以正常工作，但在 iPad Pro 上的 Safari/Chrome 上，完成状态会在过渡开始前短暂出现。

https://codepen.io/mradammorley/pen/vWPxQG

Answer 1

IOS 11.2 不再出现问题，但对于尚未更新到该版本的用户，请尝试添加 -webkit-tap-highlight-color: transparent;到受影响的元素。

在 Safari 的文档中，“覆盖当用户在 iOS 上的 Safari 中点击链接或 JavaScript 可点击元素时显示的突出显示颜色。”

参考：https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-_webkit_tap_highlight_color