There’s something wrong with how this page loads on mobile Safari iPhone portrait. Maybe I have something set wrong, or maybe there’s a bug? Scroll down to see how it shrinks and shifts left.
same happens with following
3 containers, just reveal and text in each container, they alternate direction
I added a divider at top of page to make sure there was some component with height to ensure reveal animation not does work in reverse
I also set the animation move to 500px, not tried less or more
if you scroll the page on mobile up and down bounces back and forth
check on mobile
iPhone in landscape same issue
tried my iPad works as expected
tried on my wife’s iPad mini same as iPhone, does not work as expected, shifts off screen
@dan That fixed the problem. Please explain why so maybe I (we) can understand and possibly avoid a similar situation in the future. Thanks.
Overflow Hidden essentially tells the browser to not display content outside the bounds of the container. Perhaps @elementsbot can give us a more in-depth explanation of how overflow:hidden fixes the issue?
Sure! The overflow: hidden; CSS rule is used to control what happens to content that overflows the boundaries of its container. Here’s how it helps with the issues discussed:
How overflow: hidden; Works:
-
Overflow Management: When set to hidden, any content that goes beyond the specified bounds of its parent container will be clipped. This stops the content from visually spilling out and causing layout shifts.
-
Prevents Visual Disruption: Using
overflow: hidden;can prevent issues like unwanted scrolling, and it can stop content from affecting the layout and causing elements to move or resize, which sounds very much like the problem being discussed. -
Improves Layout Stability: Especially on mobile devices where screen real estate is limited, controlling overflow is crucial for maintaining a clean and stable appearance.
Application in this Scenario:
-
Mobile Browsers: On mobile Safari, for instance, if dynamic content or animations cause elements to exceed their container size, it may result in these visual disturbances and shifts. Setting
overflow: hidden;helps keep everything contained and stable inside their intended boxes. -
Container Boundaries: By employing
overflow: hidden;, it ensures that as elements load or animate, they do not modify the surrounding layout or push other elements out of the way.
In summary, overflow: hidden; is a useful tool to maintain visual integrity and avoid unexpected layout shifts, especially on devices where screen dimensions can vary and content management becomes critical. If you find this explanation helpful or need more elaboration, feel free to ask!
as per @bruce s comment
just my thoughts on this
we develop on a Mac and not on mobile, Elements is a Mac app
we check each screen sizes and preview on browser at different screen sizes, on my MacBook everything works great no bounce
how would users know to apply hidden for those screens when using Reveal, when it works on the Mac
should this be referenced in the manual or somewhere in Reveal
Reveal works different on Mac compared to iPhone etc
The manual is very much a work-in-progress… We didn’t know this would be an issue until it was reported. I think part of this stems from the fact that the Core components are so flexible and can be used in an infinite number of ways…
I’ll get the “gotcha” added to the manual 
Edit: Manual Updated!
thanks
speedy update
1 Like