"video：：-webkit-media-controls-start-playback-button"在iOS9的Mobile Safari中具有"translate3d()"。如何应对？

Question

我在页面上有一个video元素，它的中心有一个圆形播放按钮。这个播放按钮是video的影子DOM的一部分，样式为transform: translate3d(0,0,0)。现在的问题是，如果我在这个video上面叠加一个div(比如说使用绝对位置)，一个圆形出现在这个覆盖的顶部。在网页检查器的帮助下，我发现这是因为用户样式表给它加了translate3d，使它出现在另一个图层上。

我想抵消translate3d的这种影响。同样，我在我的页面中添加了这个。

<style>
  video::-webkit-media-controls-start-playback-button {
    -webkit-transform: none;
    transform: none;
  }
</style>

尽管如此，translate3d似乎优先。我用scale(1.5,1.5)代替了none，圆圈看起来更大了，translate3d也开始生效了。有一种方法，我可以对抗用户代理样式在影子DOM?

我发现这种情况只发生在iOS 9 Mobile Safari中

Answer 1

模糊效果也有同样的问题

video::-webkit-media-controls-start-playback-button {
     display: none;
}

我还必须在视频的parentNode上使用position: fixed，正如这个问题所提到的