Post

Replies

Boosts

Views

Activity

Forcing Reflow in Safari/Chrome on iOS When Switching from overflow-x: hidden to overflow-x: scrollcroll tant que l'utilisateur maintient son doigt sur l'écran
Hello everyone, We are encountering a specific issue on iOS devices (iPhone 15 Pro in our case) when using Safari and Chrome. The problem occurs when switching an element's overflow-x property from hidden to scroll while the user keeps their finger on the screen. Problem Description: The overflow-x property change does not trigger a reflow or render update immediately. This behavior causes the element to remain visually stuck in the previous hidden state until the user lifts their finger and interacts again. Context: The element is animated. The issue happens consistently when the user's finger remains on the screen during the property transition. What We’ve Tried: Explicitly forcing styles using element.style in JavaScript. Triggering element.offsetWidth or getBoundingClientRect() to force reflow. Applying manual transform changes in combination with overflow updates. Unfortunately, none of these approaches resolve the issue in real-time while the user’s finger is on the screen. Questions: Is there a recommended way to force a reflow or repaint in Safari/Chrome on iOS under these conditions? Are there known limitations with overflow-x transitions and user touch events on iOS? Are there any workarounds or best practices to handle such cases? Thank you in advance for any insights!
0
1
123
1d