Search code examples
htmlcsssvgmobile-browser

svg breaks position: sticky on mobile browser

I try to make a web page that uses a fixed navbar and a list containing some sticky elements and an svg.
It works ok on my desktop in Firefox but is acting weird on my phone in Fennec (Firefox shows the same behavior while using the Responsive Design Tool (Ctrl + Shift + M)).

On scrolling down the fixed navbar and the sticky header scroll out of view and while scrolling up again the navbar and the header suddenly come into view again and stick to the top until the page is scrolled completely to the top.

When I remove the svg the desktop and the mobile browser show no difference regarding the stickiness.

What's wrong with the svg?
Any idea how to fix that?

<!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>

File to test with svg: https://filebin.net/6ue8y9219gajvxnc/stickytestwithsvg.html
File to test without svg: https://filebin.net/6ue8y9219gajvxnc/stickytestwithoutsvg.html
(files expire on 2020-03-30)

Solution

  • Some css changes should work -

    CSS

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