svg 中断位置：移动浏览器上的粘性

Question

我尝试制作一个使用固定导航栏和包含一些粘性元素和 svg 的列表的网页。
它在我的 Firefox 桌面上工作正常，但在我的 Fennec 中的 phone 上表现得很奇怪（Firefox 在使用响应式设计工具时显示相同的行为（Ctrl + Shift + M)).

向下滚动时，固定导航栏和粘性 header 滚动出视图，再次向上滚动时，导航栏和 header 突然再次出现并粘在顶部，直到页面完全滚动到顶部。

当我删除 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 年 3 月 30 日到期）

Answer 1

一些 css 更改应该有效 -

CSS

    html{
        height: 100%;
        overflow: hidden;
    }
    body{
      position: relative;
      height: 100%;
      overflow: auto;
      box-sizing: border-box;
   }

svg 中断位置：移动浏览器上的粘性

svg breaks position: sticky on mobile browser

html

css

svg

mobile-browser

CSS