Мобильная версияВидео отображается с использованием «эффекта межпрокрутки». Это распространенное решение в рекламной индустрии, где время показа рекламы максимально увеличивается. Это работает, устанавливая позицию: липкий вместе, например. дно: 0 в элементе видео и объединение его с более низким z-индексом, чем у фактического контента. Таким образом, видео всегда находится внизу страницы, но скрыто за содержимым. Затем при прокрутке вниз в какой-то момент видео отображается в виде наложенного текста.
Это работает нормально, однако при прокрутке мимо элемента видео HTML5 и возврате к началу страницы. , он отображается поверх содержимого, хотя это невозможно из-за более низкого z-индекса. Это происходит в трех основных браузерах, с которыми я тестировал (мобильный и настольный): Safari, Chrome и Firefox.
Это похоже на то, как если бы вы прокрутили видео и открыли его, z-индекс элемент перепутан. Теперь самое смешное, что после завершения видео (которое воспроизводится в цикле ~ 10 секунд), z-индекс, кажется, сбрасывается, и видео снова исчезает за контентом (как и должно быть, когда вы находитесь наверху) страницы снова после прокрутки).
Я попытался создать минимальный пример проблемы без слишком большого количества стилей, и она все еще возникает, поэтому я предполагаю, что есть более глубокий CSS-браузер-движок. - проблема, связанная с элементом video в сочетании с Position: Sticky и z-index.
Минимальный пример выглядит так: https://codepen. io/xteroz/pen/PoMPNWW
Ирония в том, что при запуске этого в codepen все выглядит так, как должно. Чтобы воспроизвести это поведение, возьмите HTML и CSS и поместите их в один файл:
Код: Выделить всё
Подробнее здесь: https://stackoverflow.com/questions/790 ... t-finishes
