css - Safari 中的过渡转换看起来很糟糕/不稳定/口吃

Question

我有一些基于用户滚动的功能，它们会沿着页面上下移动元素(模仿滚动效果)。

为了让它更平滑一些，我正在使用 transition: transform 0.7s cubic-bezier(0.49, 0.47, 0.63, 0.85);(使用适当的供应商前缀)。

问题是，除了在 safari 中，它工作得很好。那里 -webkit-transition: -webkit-transform 0.7s cubic-bezier(0.49, 0.47, 0.63, 0.85); 使动画四处晃动并产生振动效果。我已经阅读了很长时间，并尝试设置透视属性和背面属性，但没有成功。

有没有办法解决这个问题/有人见过吗？ Safari 是否不允许转换转换？

任何有助于理解问题的帮助都会很棒。

我找到了这个 fiddle http://jsfiddle.net/3yfspjLt/这表明我的问题。如果它一开始没有闪烁，请继续上下滚动。

出于好奇，这是我的代码，但我更好奇为什么这个错误发生在 safari 中，而不是我的特定用例。 (虽然我当然在努力寻找答案)。

JS文件

getElementPositions: function(){ 
    var de = document.documentElement;
    var windowHight = window.innerHeight; 

    var page = scrollAnimations.getTopBottom(scrollAnimations.featurePage, de, windowHight);
    var profile = scrollAnimations.getTopBottom(scrollAnimations.featureProfile, de, windowHight);
    var barOne = scrollAnimations.getTopBottom(scrollAnimations.firstBar, de, windowHight);
    var barTwo = scrollAnimations.getTopBottom(scrollAnimations.secondBar, de, windowHight);
    var barThree = scrollAnimations.getTopBottom(scrollAnimations.thirdBar, de, windowHight);

    scrollAnimations.pageDiff = page.diff;
    scrollAnimations.pageStartP = page.top - (page.padding -100);

    scrollAnimations.profileDiff = profile.diff;
    scrollAnimations.profileStartP = profile.top - (profile.padding/1.3); 

    scrollAnimations.barOneDiff = barOne.diff;
    scrollAnimations.barOneStartTop = barOne.top - (barOne.padding/1.3); 

    scrollAnimations.barTwoDiff = barTwo.diff;
    scrollAnimations.barTwoStartTop = barTwo.top - (barTwo.padding/1.3);

    scrollAnimations.barThreeDiff = barThree.diff;
    scrollAnimations.barThreeStartTop = barThree.top - (barThree.padding/1.3);

    scrollAnimations.startScrollAnimations();
  },

  getTopBottom: function(el, de, windowHight) {
    var result = {};
    var box = el.getBoundingClientRect();
    result.top = box.top + window.pageYOffset - de.clientTop;
    result.bottom = box.bottom + window.pageYOffset - de.clientTop;
    result.diff = result.bottom - result.top;
    result.padding = windowHight - result.diff;
    return result;
  },
scrollPage: function(scrollPos){
    var pageHeight = scrollAnimations.pageScroll.offsetHeight;
    var scrollDiff = scrollPos - scrollAnimations.pageStartP;
    var realPos = -scrollDiff/scrollAnimations.pageDiff;
    var lengthLeft = pageHeight - scrollAnimations.pageDiff;

    if (realPos > 0.09) {
      transY = 0.09 * lengthLeft;
    } else if(realPos < -1) {
      transY = -1 * lengthLeft;
    } else {
      transY = realPos * lengthLeft;
    }

    scrollAnimations.pageScroll.setAttribute('style', '-webkit-transform:translate3d(0,' + transY + 'px,0); -moz-transform:translate3d(0,' + transY + 'px,0); -ms-transform:translate3d(0,' + transY + 'px,0); transform:translate3d(0,' + transY + 'px,0);'); 

      if(Modernizr.orientation) {
        scrollAnimations.pageScroll.style.transformStyle='preserve-3d';
        scrollAnimations.pageScroll.style.webkitTransition='0.4s cubic-bezier(0.49, 0.47, 0.63, 0.85)';
      }

  },

CSS(我也尝试过全部使用)

#page-scroll {
    -webkit-transition: -webkit-transform 0.7s cubic-bezier(0.49, 0.47, 0.63, 0.85);
    -moz-transition: transform 0.7s cubic-bezier(0.49, 0.47, 0.63, 0.85);
    -ms-transition: transform 0.7s cubic-bezier(0.49, 0.47, 0.63, 0.85);
    -o-transition: transform 0.7s cubic-bezier(0.49, 0.47, 0.63, 0.85);
    transition: transform 0.7s cubic-bezier(0.49, 0.47, 0.63, 0.85);
  }

Answer 1

我不是 100% 确定您要完成什么，但请尝试下面这样的操作...？让我们知道这是否有帮助，如果没有详细说明您的问题，请添加更多源代码。

/* add your translateY values */
-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
transform: translateY(100px);

-webkit-transition: all 0.7s cubic-bezier(0.49, 0.47, 0.63, 0.85);
-moz-transition: all 0.7s cubic-bezier(0.49, 0.47, 0.63, 0.85);
transition: all 0.7s cubic-bezier(0.49, 0.47, 0.63, 0.85);