0

There is an animated Rubik's cube, it works perfectly on all browsers, except for safari, there are some styles that aren't applied correctly. If I change the transform-origin and keyframes transform as below for all childs, then everything is ok on safari but not on the other browsers. For some reason safari does not apply -webkit-transform, just regular transform.

Issue https://preview.ibb.co/iehfjz/issue.jpg

CSS

.rubiks-cube-1 .detail:nth-child(1) {
    margin-top: 0px;
    margin-left: 0px;
    transform-origin: 150% 150% -90px;
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, -90, 1); 
}
    @keyframes rubiks-cube-1-detail-1 {
  5% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, -90, 1); }
  9.999% {
    transform: matrix3d(0.00001745329241591186, 0, 0.999999999848, 0, 0, 1, 0, 0, -0.999999999848, 0, 0.00001745329241591186, 0, 0, 0, -90, 1); }
  10% {
    transform: matrix3d(-0.00000000000010341562, 0, 1, 0, 0, 1, 0, 0, -1, 0, -0.00000000000010341562, 0, 0, 0, -90, 1); }
  14.999% {
    transform: matrix3d(-0.00000000000010341562, 0, 1, 0, -0.999999999848, 0.00001745329241591186, -0.00000000000010341562, 0, -0.00001745329241591187, -0.999999999848, -0.0000000000000000018, 0, 0, 0, -90, 1); }
  15% {
    transform: matrix3d(-0.00000000000010341562, 0, 1, 0, -1, -0.00000000000010341562, -0.00000000000010341562, 0, 0.00000000000010341562, -1, 0, 0, 0, 0, -90, 1); }
  20% {
    transform: matrix3d(-0.00000000000010341562, 0, 1, 0, -1, -0.00000000000010341562, -0.00000000000010341562, 0, 0.00000000000010341562, -1, 0, 0, 0, 0, -90, 1); }
  25% {
    transform: matrix3d(-0.00000000000010341562, 0, 1, 0, -1, -0.00000000000010341562, -0.00000000000010341562, 0, 0.00000000000010341562, -1, 0, 0, 0, 0, -90, 1); }
  30% {
    transform: matrix3d(-0.00000000000010341562, 0, 1, 0, -1, -0.00000000000010341562, -0.00000000000010341562, 0, 0.00000000000010341562, -1, 0, 0, 0, 0, -90, 1); }
  35% {
    transform: matrix3d(-0.00000000000010341562, 0, 1, 0, -1, -0.00000000000010341562, -0.00000000000010341562, 0, 0.00000000000010341562, -1, 0, 0, 0, 0, -90, 1); }
  40% {
    transform: matrix3d(-0.00000000000010341562, 0, 1, 0, -1, -0.00000000000010341562, -0.00000000000010341562, 0, 0.00000000000010341562, -1, 0, 0, 0, 0, -90, 1); }
  45% {
    transform: matrix3d(-0.00000000000010341562, 0, 1, 0, -1, -0.00000000000010341562, -0.00000000000010341562, 0, 0.00000000000010341562, -1, 0, 0, 0, 0, -90, 1); }
  49.999% {
    transform: matrix3d(0.00000000000010341382, -0.999999999848, 0.00001745329241591187, 0, -1, -0.00000000000010341562, -0.00000000000010341562, 0, 0.00000000000010341743, -0.00001745329241591187, -0.999999999848, 0, 0, 0, -90, 1); }
  50% {
    transform: matrix3d(0.00000000000010341562, -1, -0.00000000000010341562, 0, -1, -0.00000000000010341562, -0.00000000000010341562, 0, 0.00000000000010341562, 0.00000000000010341562, -1, 0, 0, 0, -90, 1); }
  55% {
    transform: matrix3d(0.00000000000010341562, -1, -0.00000000000010341562, 0, -1, -0.00000000000010341562, -0.00000000000010341562, 0, 0.00000000000010341562, 0.00000000000010341562, -1, 0, 0, 0, -90, 1); }
  59.999% {
    transform: matrix3d(0.999999999848, -0.00001745329231249624, 0.00000000000010341382, 0, -0.00001745329231249624, -0.999999999848, -0.00000000000010341743, 0, 0.00000000000010341562, 0.00000000000010341562, -1, 0, 0, 0, -90, 1); }
  60% {
    transform: matrix3d(1, 0.00000000000020683125, 0.00000000000010341562, 0, 0.00000000000020683125, -1, -0.00000000000010341562, 0, 0.00000000000010341562, 0.00000000000010341562, -1, 0, 0, 0, -90, 1); }
  64.999% {
    transform: matrix3d(1, 0.00000000000020683125, 0.00000000000010341562, 0, 0.00000000000010341923, -0.00001745329231249625, -0.999999999848, 0, -0.00000000000020682944, 0.999999999848, -0.00001745329231249624, 0, 0, 0, -90, 1); }
  65% {
    transform: matrix3d(1, 0.00000000000020683125, 0.00000000000010341562, 0, 0.00000000000010341562, 0.00000000000020683125, -1, 0, -0.00000000000020683125, 1, 0.00000000000020683125, 0, 0, 0, -90, 1); }
  70% {
    transform: matrix3d(1, 0.00000000000020683125, 0.00000000000010341562, 0, 0.00000000000010341562, 0.00000000000020683125, -1, 0, -0.00000000000020683125, 1, 0.00000000000020683125, 0, 0, 0, -90, 1); }
  75% {
    transform: matrix3d(1, 0.00000000000020683125, 0.00000000000010341562, 0, 0.00000000000010341562, 0.00000000000020683125, -1, 0, -0.00000000000020683125, 1, 0.00000000000020683125, 0, 0, 0, -90, 1); }
  80% {
    transform: matrix3d(1, 0.00000000000020683125, 0.00000000000010341562, 0, 0.00000000000010341562, 0.00000000000020683125, -1, 0, -0.00000000000020683125, 1, 0.00000000000020683125, 0, 0, 0, -90, 1); }
  84.999% {
    transform: matrix3d(0.00001745329231249625, -0.00000000000020682764, 0.999999999848, 0, 0.999999999848, 0.00000000000020683486, -0.00001745329231249625, 0, -0.00000000000020683125, 1, 0.00000000000020683125, 0, 0, 0, -90, 1); }
  85% {
    transform: matrix3d(-0.00000000000020683125, -0.00000000000020683125, 1, 0, 1, 0.00000000000020683125, 0.00000000000020683125, 0, -0.00000000000020683125, 1, 0.00000000000020683125, 0, 0, 0, -90, 1); }
  90% {
    transform: matrix3d(-0.00000000000020683125, -0.00000000000020683125, 1, 0, 1, 0.00000000000020683125, 0.00000000000020683125, 0, -0.00000000000020683125, 1, 0.00000000000020683125, 0, 0, 0, -90, 1); }
  95% {
    transform: matrix3d(-0.00000000000020683125, -0.00000000000020683125, 1, 0, 1, 0.00000000000020683125, 0.00000000000020683125, 0, -0.00000000000020683125, 1, 0.00000000000020683125, 0, 0, 0, -90, 1); }
  100% {
    transform: matrix3d(-0.00000000000020683125, -0.00000000000020683125, 1, 0, 1, 0.00000000000020683125, 0.00000000000020683125, 0, -0.00000000000020683125, 1, 0.00000000000020683125, 0, 0, 0, -90, 1); } }

Full code - https://codepen.io/h20x/pen/YQYrOa

user1851635
  • 3
  • 2
  • all these fraction are relly needed? if you only use `0` it won't work? – Temani Afif Sep 18 '18 at 15:35
  • You could detect safari and only change the transform-origin and keyframes transform there. https://stackoverflow.com/questions/7944460/detect-safari-browser – Bonnie Sep 18 '18 at 15:39
  • I already use this fix with 2 css files for Safari and other, but I want to find and understand the problem – user1851635 Sep 18 '18 at 15:46

0 Answers0