iOS11 上的低功耗模式会影响修改 Shadow DOM 元素的伪元素吗? [英] Does low-power mode on iOS11 impact pseudo-elements that modify Shadow DOM elements?

问题描述

在正常电源模式下，在 iOS11(在 iPhone 8 和 X 上测试)上，我能够在视频元素的阴影根内隐藏一个按钮元素叠加层.

一旦启用低功耗模式，我的伪元素就不再能够隐藏按钮元素叠加层.这是怎么回事?如何在低功耗模式下隐藏按钮元素?

我的 CSS

//放置在我的 SCSS 文件中的 Shadow DOM 之外.视频::-webkit-media-controls-start-playback-button {显示:无！重要；}

要修改的DOM元素

<画面风格=宽度:11像素;高度:13像素; -webkit掩模图像:网址(数据:图像/SVG + xml的; BASE64，PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTFweCIgaGVpZ2h0PSIxM3B4IiB2aWV3Qm94PSIwIDAgMTEgMTMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI + CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQzLjEgKDM5MDEyKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5fQXNzZXRzL0lubGluZS9QbGF5PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM + PC9kZWZzPgogICAgPGcgaWQ9Ik1lZGlhLUNvbnRyb2wtU3ltYm9scyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI + CiAgICAgICAgPGcgaWQ9Il9Bc3NldHMvSW5saW5lL1BsYXkiIGZpbGw9IiMwMDAwMDAiPgogICAgICAgICAgICA8cGF0aCBkPSJNMCwwLjYwNTA2ODY5MiBDMCwwLjA1ODE3MzcxMjEgMC4zODI1MTY0ODgsLTAuMTU2MTA0Nzg5IDAuODY0MTIyNjUsMC4xMzIzMDE4ODcgTDEwLjYzMjU5ODUsNS45ODIwODkyOCBDMTEuMTA5ODQwMyw2LjI2Nzg4MjM3IDExLjExNDIwNDcsNi43Mjg2MTkxMyAxMC42MzI1OTg1LDcuMDE3MDEwOTcgTDAuODY0MTIyNjUsMTIuODY2NDk3NSBDMC4zODY4ODA4ODksMTMuMTUyMjc1OSAwLDEyLjk0MTQxNjYgMCwxMi4zOTM3MDQxIEwwLDAuNjA1MDY4NjkyIFoiIGlkPSJSZWN0YW5nbGUiPjwvcGF0aD4KICAgICAgICA8L2c + CiAgICA8L2c + Cjwvc3ZnPg ==);</图片及GT;

</视频>

注意:此问题发生在 iOS11 上的 Safari、Chrome 和 Firefox 上.伪元素在 iOS10 上运行良好(在 iPhone 5s 上测试).

解决方案

这是一个非常罕见的情况，因为大多数 iOS 用户不再使用 iOS 11.但是，我相信这是因为低功耗模式的工作方式.通常，低功耗模式通常会关闭不必要的图形、动画或视觉效果.从发生在您身上的情况来看，操作系统一定认为您的伪元素是不必要的效果并决定将其删除.在 iOS 11 中，低功耗模式还是一个很新的东西，所以可能还没有完整的测试.

我不会说我的答案是完全可靠的答案，但这基本上是我认为导致您问题的原因.

(再一次，请不要完全相信我的回答，我不是这方面的专业人士.)

In normal power mode, on iOS11 (tested on iPhone 8 and X), I am able to hide a button element overlay inside the shadow root of a video element.

Once low power mode is enabled, my pseudo-element is no longer able to hide the button element overlay. What's going on? How can I hide the button element in low power mode?

My CSS

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

DOM element to be modified

<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>

Note: This issue occurs on Safari, Chrome, and Firefox on iOS11. Pseudo-element works fine on iOS10 (tested on iPhone 5s).

解决方案

This is a pretty rare occasion since a majority of iOS users don't use iOS 11 anymore. However, I believe this happens because of how the low power mode works. Usually, low power mode turns off unnecessary graphics, animations, or visual effects in general. Judging from what happened to you, the operating system must've thought your pseudo-element was an unnecessary effect and decided to remove it. In iOS 11, low power mode was still a pretty new thing, so it probably still had incomplete testing.

I wouldn't say my answer is a completely reliable answer, but this is basically what I believe is the reason for your problem.

(once again, please don't completely trust my answer, I'm not a full professional at this stuff.)

这篇关于iOS11 上的低功耗模式会影响修改 Shadow DOM 元素的伪元素吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！