Problems with mobile page loading?

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

Can you try setting the background Container to Overflow: Hidden and see if that helps.

@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 :blush:

Edit: Manual Updated!

thanks

speedy update

1 Like