Css transform scaleX с непрозрачностью не работает в Safari

Question

Вот код .

Когда scaleX с непрозрачностью используется в фоновом изображении, оно не работает в сафари на Mac или в iphone, поэтому мы используем scale или scale3d (sx, sy, sz), чтобы разрешить это, но как это происходит? Это ошибка сафари?

        @keyframes scale-not-work-in-iphone {
    0% {
        transform: scaleX(1);
    }
    99% {
        opacity: 0;
        transform: scale3d(2, 2, 2);
    }

    100% {
        opacity: 0;
        transform: scale3d(0, 0, 0);
    }
}

Answer 1

Думаю, это потому, что вы не использовали префиксы для webkit. Также вы можете установить непрозрачность на 0%, чтобы убедиться, что она пройдена. Надеюсь, это помогло.

@keyframes scale-should-work-in-iphone {
    0% {
      opacity: 1;
      -webkit-transform:scaleX(1) scale3d(2, 2, 2);
      -moz-transform:scaleX(1) scale3d(2, 2, 2);
      -ms-transform:scaleX(1) scale3d(2, 2, 2);
      -o-transform:scaleX(1) scale3d(2, 2, 2);
      transform: scaleX(1) scale3d(2, 2, 2);
    }
    99% {
      opacity: 0;
      -webkit-transform:scaleX(1) scale3d(2, 2, 2);
      -moz-transform:scaleX(1) scale3d(2, 2, 2);
      -ms-transform:scaleX(1) scale3d(2, 2, 2);
      -o-transform:scaleX(1) scale3d(2, 2, 2);
      transform: scaleX(1) scale3d(2, 2, 2);
    }

    100% {
      opacity: 0;
      -webkit-transform:scaleX(1) scale3d(0, 0, 0);
      -moz-transform:scaleX(1) scale3d(0, 0, 0);
      -ms-transform:scaleX(1) scale3d(0, 0, 0);
      -o-transform:scaleX(1) scale3d(0, 0, 0);
      transform:scaleX(1) scale3d(0, 0, 0);
    }
}