title: In Safari, hovering over SVG elements causes a scrolled element to reset its scroll position?
body: <p>I have a <a href="https://charge.js.org" rel="nofollow noreferrer">website</a> that is exhibiting bizarre behavior that I don’t understand. I’m unable to tell if I’ve run into a bug or what I might be doing wrong.</p>
  
  <p>The page has two elements, <code>nav</code> and <code>main</code> that each have <code>overflow-y: scroll</code> set. This is so they can be scrolled independently of one another. If I scroll the <code>main</code> element, and then hover over the pagination buttons at the bottom, the <code>main</code> element will jump back to the top (lose its scroll position). It also happens if I hover over the Octocat/GitHub symbol in the navigation on the right.</p>
  
  <p>The common thread here is that the pagination buttons and the GitHub symbol on the right both have <code>svg</code> elements. If I get rid of the <code>svg</code> element the bug doesn’t happen. Also if I remove <code>overflow-y: scroll</code> from the <code>main</code> element the bug does not occur.</p>
  
  <p>I’ve also noticed that the issue might be somehow related to having <code>height: 100%</code> set on the <code>&lt;html&gt;</code> tag. When it’s removed the issue no longer occurs, but unfortunately it can’t be removed otherwise the full width/height layout doesn’t work correctly.</p>
  
  <p>Can anyone tell me why this is happening, if it’s a bug in Safari, and/or how to fix it? Thanks!</p>