Transitioning Transforms in Safari look terrible/shaky/stuttering

Question

I have a few functions that based on the scrolling a user does moves elements up and down along a page (imitating a scroll effect.)

In order to make it a little smoother I am using transition: transform 0.7s cubic-bezier(0.49, 0.47, 0.63, 0.85); (with the proper vender prefixing).

The problem is this works great except for in safari. There -webkit-transition: -webkit-transform 0.7s cubic-bezier(0.49, 0.47, 0.63, 0.85); causes the animation to jerk around and gives a vibrating effect. I have been reading up on this for ages and have tried setting the perspective property and backface properties but with no luck.

Is there a way to fix this/has anyone seen this? And does Safari not allow transitioning transforms?

Any help in understanding the problem would be amazing.

I found this fiddle http://jsfiddle.net/3yfspjLt/ that shows my problem. If it doesn't blink at first keep scrolling up and down.

For the curious this is my code, however I am more curious about why this bug happens in safari then just my specific use case. (although I am of course trying to find an answer).

JS File

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 (I have also tried using all)

#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);
  }

score 0 · Answer 1 · answered May 15 '15 at 16:00

0

I'm not 100% sure what you're trying to accomplish but try something like this below...? Let know if this helped, If not elaborate more on your question please or add more of your source codes.

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

answered May 15 '15 at 16:00

Shak Daniel

217
4
11

Hi Shak, thanks for looking! I have tried using the code above and simular but I still get a blinking/flashing. I found a fiddle that shows my problem and have updated the question. http://jsfiddle.net/3yfspjLt/ also this question http://stackoverflow.com/questions/3461441/prevent-flicker-on-webkit-transition-of-webkit-transform?rq=1 is the same problem but none of the solutions are working and it doesn't explain why it happens. – ReganPerkins May 15 '15 at 16:40

Transitioning Transforms in Safari look terrible/shaky/stuttering

1 Answers1