Question

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

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上平滑滚动，因此在这种情况下仅使用元素top不是解决方案。

Answer 1

一种解决方案是将以下内容添加到视口中当前元素（#testframe）

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

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

Safari CSS3转换高度限制

1 个答案: