5

I have an animation of three arrows enlarging and moving down, using CSS transforms (scale and translateY), in addition to opacity. It works fine in Chrome, Firefox..but Safari just shows one small arrow fading in and out. Please visit the jsfiddle for a demo, which uses SCSS.

https://jsfiddle.net/hyanqerL/

The following is what I am using in my project now, after using Mig's suggestions (I didn't include all the mixins in the js fiddle. They are for prefixes). It improved a bit, but is still buggy on Safari.

$base: 9.6px;

.scroll-animation {
  position: absolute;
  width: 100%;
  height: rem(41);
  bottom: rem(24);
  @include flexbox;
  @include justify-content(center);

  &:focus {
    outline: none;
  }

  .chevron {
    position: absolute;
    width: $base * 3.35;
    height: $base * .3;
    opacity: 0;
    @include transform(scale(.3));
    @include animation-name(move-chevron);
    @include animation-duration(3.15s);
    @include animation-timing-function(linear);
    @include animation-iteration-count(infinite);
  }

  .chevron:first-child {
    @include animation-delay(0.28s);
  }

  .chevron:nth-child(2) {
    @include animation-delay(0.66s);
  }

  .chevron:before, .chevron:after {
    content: '';
    position: absolute;
    top: 0;
    height: 100%;
    width: 50%;
    background: white;
  }

  .chevron:before {
    left: 0;
    @include transform(skewY(30deg));
  }

  .chevron:after {
    right: 0;
    width: 50%;
    @include transform(skewY(-30deg));
  }

  @keyframes move-chevron {
    0% {
      opacity: 0;
      @include transform(translateY(0) scale(.3));
    }

    33.3% {
      opacity: 1;
      @include transform(translateY($base * 2.8) scale(1));
    }

    53.2% {
      opacity: .2;
      @include transform(translateY($base * 4.65) scale(0.3));
    }

    60.7% {
      opacity: 0;
      @include transform(translateY($base * 5.15) scale(0));
    }

    100% {
      opacity: 0;
      @include transform(translateY($base * 5.15) scale(0));
    }
  }
}

1
  • Not sure if it is only in your snippet here or also in the actual code, but you forgot to add the translateY in the transform of the default .chevron block. it is important, otherwise the whole consistency of the transform value is broken and cannot work properly. At least it does for me.
    – Mig
    Jul 31, 2019 at 4:46

1 Answer 1

4
+100

One thing to note is that browsers can be touchy with the fact that in order to animate, you need values that are similar. In your case, if you animate opacity AND scale, it is better to make sure that you always have these 2 functions in transform so that a transition can be made (including your default transform that is not in the keyframes). Use a neutral value to fill the gaps (e.g. translateY(0em) scale(0.3)).

Chrome seems to be smart enough to second guess, but I tried in Safari and now I can see the scaling. Although there is still something weird: Safari does not seem to like rem values in translate. Or at least it seems way smaller. I tried ems instead and it looks fine. If you want something proportional, use percentages which will follow rems since the dimensions of chevron are in rems.

Let me know in the comments if you get any luck implementing this.

Apart from that, as discussed before, make sure you have as many prefixes as needed (including each prefix version of the keyframes block). You are using Sass so it should be easy.

Also make sure you fix the warnings given by jsFiddle with a yellow dot on the side. You never know which browser will be fussy so you might as well have a leading 0 on float numbers and double colon version of before and after.

I am sure you have most of this in your working version since your jsFiddle is just here to help us track the issue, but it is worth mentioning for beginners reading the answers as well.

6
  • I have prefix mixins in my code, but took them out in my js fiddle, so I don't have to define them again. I pasted your code into a JS fiddle, but it has the same issue. Besides, it doesn't work in the latest version of Safari, which doesn't need the prefixes. jsfiddle.net/78nqehuL Jul 29, 2019 at 16:07
  • I am not saying in your case, but in general, don't assume the latest version of a browser doesn't need prefixes.
    – Mig
    Jul 30, 2019 at 4:27
  • It did improve things a little bit. Interestingly enough, the animation looks different if I disable JetPack's lazy load feature (WordPress plugin), but both versions still don't look perfect. I think Safari just can't handle all that's going on in the page (an animation on top of a video playing behind it)... Jul 30, 2019 at 20:14
  • Alright, still good to hear. I can't see the result with a video but yeah Safari is not the smoothest. I was surprised it does not work properly with the rem values. Everything was way closer together. I don't understand how measure can be different in one browser. There must be a bug somewhere in Safari.
    – Mig
    Jul 31, 2019 at 4:41
  • Yeah, I find Safari is usually the most problematic browser...I'll give you the bounty soon if nobody else replies with another answer in a few days. Your answer didn't really "solve" it completely, but there may not be much else that can be done at this point... Jul 31, 2019 at 16:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.