CSS transitions on Safari are choppy vs. other bro

Question

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 transitions are nice and smooth with Chrome, Firefox, and Edge. However with Safari it just looks bad and must be around 15 fps when rendering.

A basic JSFiddle is here: https://jsfiddle.net/q5a9b62s/6/

The website I'm working on is here: http://www.allinimages.ch/

Thanks.

Answer 1

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

    function grow() {
      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.