iOS11 的低功耗模式会影响修改 Shadow DOM 元素的伪元素吗？答案

【问题标题】：Does low-power mode on iOS11 impact pseudo-elements that modify Shadow DOM elements?iOS11 的低功耗模式会影响修改 Shadow DOM 元素的伪元素吗？
【发布时间】：2018-06-04 09:55:53
【问题描述】：

在正常电源模式下，在 iOS11 上（在 iPhone 8 和 X 上测试），我能够在视频元素的阴影根内隐藏按钮元素覆盖。

启用低功耗模式后，我的伪元素不再能够隐藏按钮元素覆盖。这是怎么回事？如何在低功耗模式下隐藏按钮元素？

我的 CSS

// Placed outside Shadow DOM in my SCSS file.    
video::-webkit-media-controls-start-playback-button {
  display: none !important;
}

要修改的DOM元素

<video style="display: inline;" class="playerElement" poster="" autoplay="true" width="100%" oncontextmenu="return false;">
  // Shadow Content (User Agent)
  <style>
    // Lots of default styles with Apple legal language.
  </style>
  <div class="media-controls-container">
    <div pseudo="-webkit-media-text-track-container" class="visible-controls-bar" style="display: none;"></div>
    <div class="media-controls inline ios uses-ltr-user-interface-layout-direction" style="width: 375px; height: 275px;">
      <button class="play-pause paused center" aria-label="Play" style="width: 11px; height: 13px; left: 16px;">
        <div class="background-tint">
          <div class="blur"></div>
          <div class="tint"></div>
        </div>
        <picture style="width: 11px; height: 13px; -webkit-mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTFweCIgaGVpZ2h0PSIxM3B4IiB2aWV3Qm94PSIwIDAgMTEgMTMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQzLjEgKDM5MDEyKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5fQXNzZXRzL0lubGluZS9QbGF5PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9Ik1lZGlhLUNvbnRyb2wtU3ltYm9scyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Il9Bc3NldHMvSW5saW5lL1BsYXkiIGZpbGw9IiMwMDAwMDAiPgogICAgICAgICAgICA8cGF0aCBkPSJNMCwwLjYwNTA2ODY5MiBDMCwwLjA1ODE3MzcxMjEgMC4zODI1MTY0ODgsLTAuMTU2MTA0Nzg5IDAuODY0MTIyNjUsMC4xMzIzMDE4ODcgTDEwLjYzMjU5ODUsNS45ODIwODkyOCBDMTEuMTA5ODQwMyw2LjI2Nzg4MjM3IDExLjExNDIwNDcsNi43Mjg2MTkxMyAxMC42MzI1OTg1LDcuMDE3MDEwOTcgTDAuODY0MTIyNjUsMTIuODY2NDk3NSBDMC4zODY4ODA4ODksMTMuMTUyMjc1OSAwLDEyLjk0MTQxNjYgMCwxMi4zOTM3MDQxIEwwLDAuNjA1MDY4NjkyIFoiIGlkPSJSZWN0YW5nbGUiPjwvcGF0aD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==);"</picture>
      </button>
    </div>
  </div>
</video>

注意：此问题出现在 iOS11 上的 Safari、Chrome 和 Firefox 上。伪元素在 iOS10 上运行良好（在 iPhone 5s 上测试）。

【问题讨论】：

刚刚注意到这没有得到答案，我的想法是它可能是导致问题的自动播放。我可以看到您在 HTML 中已将自动播放设置为 true。在低功耗模式下禁用自动播放，这可能会影响伪元素正常工作。

标签： ios css iphone pseudo-element shadow-dom

【解决方案1】：

这是一个非常罕见的情况，因为大多数 iOS 用户不再使用 iOS 11。但是，我相信这是因为低功耗模式的工作原理。通常，低功耗模式通常会关闭不必要的图形、动画或视觉效果。从你发生的情况来看，操作系统肯定认为你的伪元素是不必要的效果，并决定将其删除。在 iOS 11 中，低功耗模式仍然是一个相当新的事物，因此它可能还有不完整的测试。

我不会说我的答案是一个完全可靠的答案，但这基本上是我认为你的问题的原因。

（再一次，请不要完全相信我的回答，我不是这方面的专业人士。）

【讨论】：