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不允许转换转换吗？

理解这个问题的任何帮助都会很棒。

我发现这个小提示http://jsfiddle.net/3yfspjLt/显示了我的问题。如果它一开始没有闪烁，请继续上下滚动。

好奇这是我的代码，但是我更好奇为什么这个bug在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

我不是百分百肯定你想要完成什么，但尝试下面这样的事情......？请知道这是否有帮助，如果没有详细说明您的问题，请添加更多源代码。

/* 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);

在Safari中过渡变换看起来很糟糕/不稳定/口吃

1 个答案: