title: CSS3 transform: translate maximum value?
body: <p>I created an experiment to <a href="https://daniellamb.com/experiments/infinite-pi/" rel="nofollow noreferrer">infinite-scroll the first billion digits of Pi</a> to find/create a scrolling solution that has high-performance with a massive dataset. I started testing with <a href="http://iscrolljs.com" rel="nofollow noreferrer">iScroll</a> and ran into an issue.</p>
  
  <p><a href="https://i.stack.imgur.com/51Uzf.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/51Uzf.gif" alt="infinite-scroll the first billion digits of Pi"></a></p>
  
  <p>This demo works great (in Chrome) till around 33 million <code>transform: translate(0px, 3.35545e+07px);</code></p>
  
  <p>You can see the issue by running the following commands in the dev tools console, then scrolling.</p>
  
  <pre><code>scroller.scrollTo(0, -33553700); scroller._execEvent('scroll');
  </code></pre>
  
  <p>Any CSS experts know the limits of <code>transform: translate</code>?</p>
  
  <p><strong>Update</strong>: FYI, I see the same issue at ~33 million when using <code>position: absolute</code>.</p>