`video::-webkit-media-controls-start-playback-button` с `translate3d()` в мобильном Safari iOS9. Как этому противостоять?

У меня есть элемент video на странице с круглой кнопкой воспроизведения в центре. Эта кнопка воспроизведения является частью теневого DOM video и имеет стиль transform: translate3d(0,0,0). Теперь проблема в том, что если я наложу div поверх этого video (скажем, используя абсолютную позицию), поверх этого наложения появится круглая форма. С помощью веб-инспектора я узнал, что это из-за translate3d, примененного к нему пользовательской таблицей стилей, заставляющей его отображаться на другом слое.

Я хотел противостоять этому эффекту translate3d. Для того же я добавил это на моей странице.

<style>
  video::-webkit-media-controls-start-playback-button {
    -webkit-transform: none;
    transform: none;
  }
</style>

Несмотря на это, translate3d, кажется, имеет приоритет. Я заменил none на scale(1.5,1.5), круг стал больше, а также translate3d начал действовать. Есть ли способ противостоять стилям агента пользователя в теневой модели DOM?

Я обнаружил, что это происходит только в iOS 9 Mobile Safari.


ios9 css mobile-safari html5-video shadow-dom
person Goje87    schedule 15.09.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

была такая же проблема с эффектом размытия

video::-webkit-media-controls-start-playback-button {
     display: none;
}

мне также пришлось использовать position: fixed в родительском узле видео, как упоминалось в этот вопрос

person neaumusic    schedule 04.11.2015