title: Any known trick for css svg perspective scene in firefox
body: <h1>Problem</h1>
  
  <p>I have built a scene that uses SVG and css perspective on the main scene for <a href="https://sierranevada.co" rel="nofollow noreferrer">our company website</a>. <strong>This site scrolls sideways not up and down</strong>.
  Firefox has some problems after you reach the end of the scene and come back.
  Also sometimes when resizing the window the scene goes crazy and the different layers start showing rendering artifacts.</p>
  
  <p>I'm currently using firefox developer edition (58.0b7) on a windows laptop with intel hd graphics but the problem seems to happen on all versions of firefox that I have tested both win and mac.</p>
  
  <p><em>Is there some sort of known or obscure css trick or workaround to get these artifacts to go away or have I stumbled on a bug?</em></p>
  
  <p>Chrome and Safari render correctly and don't have these issues.</p>
  
  <h1>The rendering artifacts in firefox</h1>
  
  <p><a href="https://i.stack.imgur.com/Le6dC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Le6dC.png" alt="Rendering Artifacts"></a></p>
  
  <h1>How the scene should render</h1>
  
  <p><a href="https://i.stack.imgur.com/TGVNm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TGVNm.png" alt="How it should look (and does so at first)"></a></p>