Примечание. Эта проблема возникает в Safari, Chrome и Firefox на iOS11. Псевдоэлемент отлично работает на iOS10 (проверено на iPhone 5s).
чном режиме питания на 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>
Примечание. Эта проблема возникает в Safari, Chrome и Firefox на iOS11. Псевдоэлемент отлично работает на iOS10 (проверено на iPhone 5s).