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.
16 Replies
~MARSMAN~
~MARSMAN~15mo 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
reader_kein15mo 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
reader_kein15mo ago
This is in iPadOS
~MARSMAN~
~MARSMAN~15mo ago
oh yeah I see it now PepeHmm
reader_kein
reader_kein15mo ago
This is on Windows
~MARSMAN~
~MARSMAN~15mo 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
reader_kein15mo ago
I'm sorry, but that is unused code. Let me remove it. I'll try that to the used "w" one
~MARSMAN~
~MARSMAN~15mo ago
oh ok which keyframes you're using to reset and restart the animation?
reader_kein
reader_kein15mo ago
I am using tailwindcss for the variables assigning conditional classes.
No description
reader_kein
reader_kein15mo ago
And in App.css file, I've
No description
reader_kein
reader_kein15mo ago
all the keyframes and animation class is in App.css file.
Kevin Powell
Kevin Powell15mo 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
reader_kein14mo 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
reader_kein14mo ago
The above one is animating "left" property and adjusting using transform.
reader_kein
reader_kein14mo ago
https://codepen.io/mpzsd/pen/JjwEmzX This one is animating "transform" property and adjusting using "left".
reader_kein
reader_kein14mo 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.
Want results from more Discord servers?
Add your server