Safari CSS3 变换高度限制答案

【问题标题】：Safari CSS3 transform height limitSafari CSS3 变换高度限制
【发布时间】：2011-03-04 01:54:43
【问题描述】：

我有一个视口 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 上进行平滑滚动，因此在这种情况下仅使用元素顶部不是解决方案。

【问题讨论】：

我相信，这是一个“硬编码”限制，它是 131072 像素。
@kirilloid 所以这是一个 CSS3 转换限制，因为 css top 工作正常吗？
好像是这样。不过，不要失去希望，因为我不确定 =)
这只发生在 iOS 上吗？您的代码在 Safari 5.0.3 Mac 上对我来说似乎运行良好。
可能是价值限制是狩猎实践，就像他们在z-index中所做的那样

标签： javascript html safari css

【解决方案1】：

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

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

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

【讨论】：