Kevin Powell - Community•9mo ago

Weird bug on Apple Devices - CSS Keyframes animation - transform

Hello. I want some help with CSS issue. http://codesandbox.io/p/sandbox/blissful-thunder-vdcthy?file=/src/App.css:140,58 Can you please help me with this weird bug I would call, on specifically iOS, iPadOS, etc. It is regarding the CSS keyframes animation. In that the,

transform: translateX(calc(100cqw - 100%))

transform: translateX(calc(100cqw - 100%))

is the issue. More like the “100%” is the one causing issues on the apple devices. I tested it on the Windows and Android, it works fine.

blissful-thunder-vdcthy

16 Replies

~MARSMAN~•9mo ago

what's the bug that appears to you? on my iPad safari and chrome, the blue rectangle is moving horizontally back and forth I don't see any issue

reader_kein•9mo ago

When I toggle the loading...It pauses then when I try to resume it, it remains stopped because of "100%" in transform. It should work as in Windows or Android. I don't know what is the issue here. 😢

reader_kein•9mo ago

This is in iPadOS

~MARSMAN~•9mo ago

oh yeah I see it now PepeHmm

reader_kein•9mo ago

This is on Windows

~MARSMAN~•9mo ago

I'm not sure really, but for the .reset class at line 35 and .animate-back at line 55 try and add the -webkit- prefix for the animation properties and see if it fixes it

reader_kein•9mo ago

I'm sorry, but that is unused code. Let me remove it. I'll try that to the used "w" one

~MARSMAN~•9mo ago

oh ok which keyframes you're using to reset and restart the animation?

reader_kein•9mo ago

I am using tailwindcss for the variables assigning conditional classes.

reader_kein•9mo ago

And in App.css file, I've

reader_kein•9mo ago

all the keyframes and animation class is in App.css file.

Kevin Powell•9mo ago

There are some funny animation bugs with Safari/WebKit... this might be one hmm, really odd because if i look at it in my dev tools, it's moving... l like... the blue box isn't moving, but if you hover over an element in your devtools it highlights it in the viewport, and the blue box isn't moving, but the highlight is going back and forth 😅 Instead of toggling the custom property (which I think is a good way to do it), could you try toggling a class and seeing if it makes a difference? I don't see why it would, but could be something odd there. And I can't see why this wouldn't work, so I do think it's something with Safari/Webkit that's buggy

reader_kein•9mo ago

I am not able to get it to work. So I tried something else. https://codepen.io/mpzsd/pen/ZEVLJbJ I use left property for animation and then transform for adjusting the position.

mpzsd

CodePen

ZEVLJbJ

...

reader_kein•9mo ago

The above one is animating "left" property and adjusting using transform.

reader_kein•9mo ago

https://codepen.io/mpzsd/pen/JjwEmzX This one is animating "transform" property and adjusting using "left".

mpzsd

CodePen

Weird bug on Apple Devices - CSS Keyframes animation: Animate Trans...

...

reader_kein•9mo ago

Which one is more preferable? In transform one, When I add 100% instead of width of the box in pixels, like

@keyframes anim {
  0% {
    transform: translatex(0)
  }
  100% {
    transform: translatex(calc(100cqw - 100%))  /** <----- here */
  }
}

@keyframes anim {
  0% {
    transform: translatex(0)
  }
  100% {
    transform: translatex(calc(100cqw - 100%))  /** <----- here */
  }
}

this causes the bug, but there is no need of adjusting with JavaScript. But when I use the value in pixels, like

@keyframes anim {
  0% {
    transform: translatex(0)
  }
  100% {
    transform: translatex(calc(100cqw - 48px))  /** <----- here */
  }
}

@keyframes anim {
  0% {
    transform: translatex(0)
  }
  100% {
    transform: translatex(calc(100cqw - 48px))  /** <----- here */
  }
}

It works, but needs readjustment of position because of the pixel value.

Gaming

Programming

Weird bug on Apple Devices - CSS Keyframes animation - transform