Css Transitions On Safari Are Choppy Vs. Other Browsers

I'm really struggling trying to create smooth CSS transitions in Safari. I'm trying to hide/show divs by changing their height with a JavaScript onclick event. The resulting transi

Solution 1:

You could try using JavaScript to add a className to you div like this:

functiongrow() {
      var element = document.getElementById("boxid");
      if (!element.className) {
        element.className = 'tall';
      } else {
        element.className = '';
      }
    };

I've added the nullification of the className to enable toggling of the animation.

Then, let CSS processing do all of the transforming for you:

#boxid {
      background-color: red;
      width: 50px;
      height: 50px;
      position: relative;
      -webkit-transition: height 0.3s ease; 
        transition: height 0.3s ease;
    }

    #boxid.tall {
      height: 500px;
      -webkit-transition: height 0.3s ease; 
      transition: height 0.3s ease;
      transform: translate3d(100) /* this property ensures GPU processing cross-browser */
    }

Codepen example is here.

Great article on smooth CSS transitions is here.

Some issues for cross-browser use of translate3d are documented here.