javascript - Safari CSS3 变换高度限制

Question

我有一个视口(viewport) div (testframe)，其中包含一堆其他 div。我正在使用 css 转换在 testframe 中滑动 innerFrame。代码如下。

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"
    $('#innerFrame')[0].style.webkitTransform = "translate3d(0px,-100069900px,0)"
  }
});

在 Safari 中，如果我使用 css 转换 (useTransforms = true)，则不会呈现 div 的底部。但是，如果我使用元素 top 来控制它，它就会被渲染。

只有当高度大于 130000px 时才会出现这种情况。有谁知道为什么会发生这种情况，或者解决此问题的方法？请注意，在完整代码中，我使用 css3 转换在 iOS/Safari 上实现平滑滚动，因此在这种情况下仅使用顶部元素不是解决方案。

Answer 1

一种解决方案是将以下内容添加到当前在视口(viewport)中的元素 (#testframe)

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

这似乎强制渲染。但是请小心使用它，因为如果在太多元素上使用它可能会导致 iOS 中的浏览器崩溃(在此处解释 http://cubiq.org/testing-memory-usage-on-mobile-safari )