O modo de baixa energia no iOS11 afeta os pseudoelementos que modificam os elementos Shadow DOM?

Question

Dec 21, 2017, 06:13 PM

ios iphone shadow-dom css pseudo-element

O modo de baixa energia no iOS11 afeta os pseudoelementos que modificam os elementos Shadow DOM?

No modo de energia normal, no iOS11 (testado no iPhone 8 e X), posso ocultar uma sobreposição de elemento de botão dentro da raiz de sombra de um elemento de vídeo.

Quando o modo de baixa energia está ativado, meu pseudoelemento não consegue mais ocultar a sobreposição do elemento do botão. O que está acontecendo? Como ocultar o elemento do botão no modo de baixa energia?

Meu CSS

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

Elemento DOM a ser modificado

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

Nota: Esse problema ocorre no Safari, Chrome e Firefox no iOS11. O pseudoelemento funciona bem no iOS10 (testado no iPhone 5s).