reader_kein
reader_kein
PostsComments
KPCKevin Powell - Community
Created by reader_kein on 9/7/2023 in #front-end
Weird bug on Apple Devices - CSS Keyframes animation - transform
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.
23 replies
KPCKevin Powell - Community
Created by reader_kein on 9/7/2023 in #front-end
Weird bug on Apple Devices - CSS Keyframes animation - transform
Which one is more preferable?
23 replies
KPCKevin Powell - Community
Created by reader_kein on 9/7/2023 in #front-end
Weird bug on Apple Devices - CSS Keyframes animation - transform
https://codepen.io/mpzsd/pen/JjwEmzX This one is animating "transform" property and adjusting using "left".
23 replies
KPCKevin Powell - Community
Created by reader_kein on 9/7/2023 in #front-end
Weird bug on Apple Devices - CSS Keyframes animation - transform
The above one is animating "left" property and adjusting using transform.
23 replies
KPCKevin Powell - Community
Created by reader_kein on 9/7/2023 in #front-end
Weird bug on Apple Devices - CSS Keyframes animation - transform
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.
23 replies
KPCKevin Powell - Community
Created by reader_kein on 9/7/2023 in #front-end
Weird bug on Apple Devices - CSS Keyframes animation - transform
all the keyframes and animation class is in App.css file.
23 replies
KPCKevin Powell - Community
Created by reader_kein on 9/7/2023 in #front-end
Weird bug on Apple Devices - CSS Keyframes animation - transform
No description
23 replies
KPCKevin Powell - Community
Created by reader_kein on 9/7/2023 in #front-end
Weird bug on Apple Devices - CSS Keyframes animation - transform
No description
23 replies
KPCKevin Powell - Community
Created by reader_kein on 9/7/2023 in #front-end
Weird bug on Apple Devices - CSS Keyframes animation - transform
I'll try that to the used "w" one
23 replies
KPCKevin Powell - Community
Created by reader_kein on 9/7/2023 in #front-end
Weird bug on Apple Devices - CSS Keyframes animation - transform
I'm sorry, but that is unused code. Let me remove it.
23 replies
KPCKevin Powell - Community
Created by reader_kein on 9/7/2023 in #front-end
Weird bug on Apple Devices - CSS Keyframes animation - transform
This is on Windows
23 replies
KPCKevin Powell - Community
Created by reader_kein on 9/7/2023 in #front-end
Weird bug on Apple Devices - CSS Keyframes animation - transform
This is in iPadOS
23 replies
KPCKevin Powell - Community
Created by reader_kein on 9/7/2023 in #front-end
Weird bug on Apple Devices - CSS Keyframes animation - transform
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. 😢
23 replies