Я пытаюсь создать веб-страницу, которая использует фиксированную панель навигации и список, содержащий некоторые липкие элементы и svg. Он работает нормально на моем рабочем столе в Firefox, но на Fenne работает странно на моем телефоне c (Firefox показывает то же поведение при использовании Responsive Design Tool ( Ctrl + Shift *) 1004 * + M )).
При прокрутке вниз по фиксированной навигационной панели и проклеивающемуся заголовку прокручиваются вне поля зрения, а при прокрутке вверх снова навигационная панель и заголовок снова появляются и снова прилипают наверх до тех пор, пока страница не будет полностью прокручена до верха.
Когда я удаляю svg, рабочий стол и мобильный браузер не показывают различий в отношении липкости.
Что не так с svg? Любая идея, как это исправить?
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
</head>
<body style="padding-top: 4.5rem;">
<nav style="position: fixed; top:0; height: 4.5rem; width:100%; background-color: #fa78;">
Status
</nav>
<main>
<div>
<div style="z-index: 10; position: -webkit-sticky; position: sticky; top: 4.5rem;">
<div style="background-color:#5558; color: white;">
Header 1
</div>
</div>
<div>
Lorem ipsum dolor sit amet, ...
</div>
<div>
Lorem ipsum dolor sit amet, ...
</div>
<div>
Lorem ipsum dolor sit amet, ...
</div>
</div>
<div>
<div style="z-index: 10; position: -webkit-sticky; position: sticky; top: 4.5rem;">
<div style="background-color:#5558; color: white;">
Header 2
</div>
</div>
<div>
<svg width="590" height="250"></svg>
</div>
</div>
<div>
<div style="z-index: 10; position: -webkit-sticky; position: sticky; top: 4.5rem;">
<div style="background-color:#5558; color: white;">
Header 3
</div>
</div>
<div>
Lorem ipsum dolor sit amet, ...
</div>
<div>
Lorem ipsum dolor sit amet, ...
</div>
<div>
Lorem ipsum dolor sit amet, ...
</div>
</div>
</main>
</body>
</html>
Файл для тестирования с svg: https://filebin.net/6ue8y9219gajvxnc/stickytestwithsvg.html Файл для тестирования без svg: https://filebin.net/6ue8y9219gajvxnc/stickytestwithoutsvg.html (срок действия файлов истекает 2020-03-30)