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

~MARSMAN~•9/7/23, 1:05 PM

what's the bug that appears to you?

~MARSMAN~•9/7/23, 1:06 PM

on my iPad safari and chrome, the blue rectangle is moving horizontally back and forth
I don't see any issue

reader_keinOP•9/7/23, 1:08 PM

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_keinOP•9/7/23, 1:10 PM

This is in iPadOS

~MARSMAN~•9/7/23, 1:13 PM

oh
yeah I see it now PepeHmm

reader_keinOP•9/7/23, 1:14 PM

This is on Windows

~MARSMAN~•9/7/23, 1:22 PM

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_keinOP•9/7/23, 1:23 PM

I'm sorry, but that is unused code. Let me remove it.

~~MARSMAN~I'm not sure really, but for the .reset class at line 35 and .animate-back at li...

reader_keinOP•9/7/23, 1:23 PM

I'll try that to the used "w" one

~MARSMAN~•9/7/23, 1:24 PM

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

reader_keinOP•9/7/23, 1:48 PM

I am using tailwindcss for the variables assigning conditional classes.

reader_keinOP•9/7/23, 1:49 PM

And in file, I've

reader_keinOP•9/7/23, 1:50 PM

all the keyframes and animation class is in file.

Kevin Powell•9/7/23, 4:47 PM

There are some funny animation bugs with Safari/WebKit... this might be one

Kevin Powell•9/7/23, 4:52 PM

hmm, really odd because if i look at it in my dev tools, it's moving... l

Kevin Powell•9/7/23, 4:52 PM

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

Kevin Powell•9/7/23, 4:55 PM

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_keinOP•9/8/23, 7:59 AM

I am not able to get it to work. So I tried something else.
https://codepen.io/mpzsd/pen/ZEVLJbJ
I use