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,
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.
16 Replies
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
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. 😢
This is in iPadOS
oh
yeah I see it now
This is on Windows
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
I'm sorry, but that is unused code. Let me remove it.
I'll try that to the used "w" one
oh ok
which keyframes you're using to reset and restart the animation?
I am using tailwindcss for the variables assigning conditional classes.
And in
App.css
file, I'veall the keyframes and animation class is in
App.css
file.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
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.The above one is animating "left" property and adjusting using transform.
https://codepen.io/mpzsd/pen/JjwEmzX
This one is animating "transform" property and adjusting using "left".
Which one is more preferable?
In transform one, When I add
100%
instead of width of the box in pixels, like
this causes the bug, but there is no need of adjusting with JavaScript. But when I use the value in pixels, like
It works, but needs readjustment of position because of the pixel value.