title: Does low-power mode on iOS11 impact pseudo-elements that modify Shadow DOM elements?
body: <p>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.</p>
  
  <p>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?</p>
  
  <p><strong>My CSS</strong></p>
  
  <pre><code>// Placed outside Shadow DOM in my SCSS file.    
  video::-webkit-media-controls-start-playback-button {
    display: none !important;
  }
  </code></pre>
  
  <p><strong>DOM element to be modified</strong></p>
  
  <pre><code>&lt;video style="display: inline;" class="playerElement" poster="" autoplay="true" width="100%" oncontextmenu="return false;"&gt;
    // Shadow Content (User Agent)
    &lt;style&gt;
      // Lots of default styles with Apple legal language.
    &lt;/style&gt;
    &lt;div class="media-controls-container"&gt;
      &lt;div pseudo="-webkit-media-text-track-container" class="visible-controls-bar" style="display: none;"&gt;&lt;/div&gt;
      &lt;div class="media-controls inline ios uses-ltr-user-interface-layout-direction" style="width: 375px; height: 275px;"&gt;
        &lt;button class="play-pause paused center" aria-label="Play" style="width: 11px; height: 13px; left: 16px;"&gt;
          &lt;div class="background-tint"&gt;
            &lt;div class="blur"&gt;&lt;/div&gt;
            &lt;div class="tint"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;picture style="width: 11px; height: 13px; -webkit-mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTFweCIgaGVpZ2h0PSIxM3B4IiB2aWV3Qm94PSIwIDAgMTEgMTMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQzLjEgKDM5MDEyKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5fQXNzZXRzL0lubGluZS9QbGF5PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9Ik1lZGlhLUNvbnRyb2wtU3ltYm9scyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Il9Bc3NldHMvSW5saW5lL1BsYXkiIGZpbGw9IiMwMDAwMDAiPgogICAgICAgICAgICA8cGF0aCBkPSJNMCwwLjYwNTA2ODY5MiBDMCwwLjA1ODE3MzcxMjEgMC4zODI1MTY0ODgsLTAuMTU2MTA0Nzg5IDAuODY0MTIyNjUsMC4xMzIzMDE4ODcgTDEwLjYzMjU5ODUsNS45ODIwODkyOCBDMTEuMTA5ODQwMyw2LjI2Nzg4MjM3IDExLjExNDIwNDcsNi43Mjg2MTkxMyAxMC42MzI1OTg1LDcuMDE3MDEwOTcgTDAuODY0MTIyNjUsMTIuODY2NDk3NSBDMC4zODY4ODA4ODksMTMuMTUyMjc1OSAwLDEyLjk0MTQxNjYgMCwxMi4zOTM3MDQxIEwwLDAuNjA1MDY4NjkyIFoiIGlkPSJSZWN0YW5nbGUiPjwvcGF0aD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==);"&lt;/picture&gt;
        &lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/video&gt;
  </code></pre>
  
  <p><strong>Note:</strong> This issue occurs on Safari, Chrome, and Firefox on iOS11. Pseudo-element works fine on iOS10 (tested on iPhone 5s).</p>