Safari CSS3 transform height limit

I have a viewport div (testframe), which contains a bunch of other divs within. I'm using css transforms to slide innerFrame within testframe. The code is as follows.

HTML:

<div id="testframe" style="height: 400px; overflow: hidden">
  <div id="innerFrame"></div>
</div>

JAVASCRIPT:

$(document).ready(function() {
  for(var i=0; i<9999; i++) {
    $('#innerFrame').append('<div style="margin: 9px; background-color: blue; height: 9999px"></div>')
  }
  $('#innerFrame').append('<div>Hi'+Math.random()+'</div>')

  useTransforms = true
  if(!useTransforms) {
    $('#innerFrame').css({
      'position': 'relative',
      'top': '-100069900px'
    })
  } else {
    $('#innerFrame')[0].style.webkitTransitionProperty = '-webkit-transform'
    $('#innerFrame')[0].style.webkitTransitionDuration = "2000ms"
    $('#innerFra开发者_如何转开发me')[0].style.webkitTransform = "translate3d(0px,-100069900px,0)"
  }
});

In Safari if I use css transforms (useTransforms = true) then the bottom of the div isn't rendered. However if I use the elements top to control it, it does get rendered.

This only occurs when the height is greater than about 130000px. Does anyone know why this happens, or a work around to fix the issue? Please note that in the full code I'm using css3 transitions for smooth scrolling on iOS/Safari so using just using the elements top isn't a solution in this scenario.

One solution is to add the following to the element currently in the viewport (#testframe)

$(currentElement)[0].style.webkitTransform = 'translate3d(0,0,0)'

This seems to force the render. However use this with care, because it can cause a browser crash in iOS if used on too many elements (explained here http://cubiq.org/testing-memory-usage-on-mobile-safari)