# Problems with mobile page loading?

**URL:** <https://forums.realmacsoftware.com/t/problems-with-mobile-page-loading/48069>\
**Category:** Elements\
**Created:** [June 17, 2025, 12:40am UTC](https://forums.realmacsoftware.com/t/problems-with-mobile-page-loading/48069 "2025-06-17T00:40:06Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![bruce](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bruce/32/23155_2.png) [@bruce](https://forums.realmacsoftware.com/u/bruce)\
**Post date:** [June 17, 2025, 12:40am UTC](https://forums.realmacsoftware.com/t/problems-with-mobile-page-loading/48069/1 "2025-06-17T00:40:06Z")

</div>

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.

> **[Spunky's Kitchen For Sale Items](https://kieffer.us/for_sale_gallery/)**

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [June 17, 2025, 5:09am UTC](https://forums.realmacsoftware.com/t/problems-with-mobile-page-loading/48069/3 "2025-06-17T05:09:10Z")

</div>

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

> **[Untitled Page](https://sjwjaw.co.uk/test/)**

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [June 17, 2025, 5:19am UTC](https://forums.realmacsoftware.com/t/problems-with-mobile-page-loading/48069/4 "2025-06-17T05:19:06Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [June 17, 2025, 10:59am UTC](https://forums.realmacsoftware.com/t/problems-with-mobile-page-loading/48069/6 "2025-06-17T10:59:55Z")

</div>

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

 ![CleanShot 2025-06-17 at 11 .58.53@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/7/5/75fcf8f1c3e7b46642af82d335f05d64e5389ba9.jpeg)

---

<div class="post-metadata">

**Author:** ![bruce](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bruce/32/23155_2.png) [@bruce](https://forums.realmacsoftware.com/u/bruce)\
**Post date:** [June 17, 2025, 2:51pm UTC](https://forums.realmacsoftware.com/t/problems-with-mobile-page-loading/48069/7 "2025-06-17T14:51:29Z")

</div>

@dan That fixed the problem. Please explain why so maybe I (we) can understand and possibly avoid a similar situation in the future. Thanks.

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [June 17, 2025, 2:54pm UTC](https://forums.realmacsoftware.com/t/problems-with-mobile-page-loading/48069/8 "2025-06-17T14:54:30Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![elementsbot](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/elementsbot/32/33134_2.png) [@elementsbot](https://forums.realmacsoftware.com/u/elementsbot)\
**Post date:** [June 17, 2025, 2:54pm UTC](https://forums.realmacsoftware.com/t/problems-with-mobile-page-loading/48069/9 "2025-06-17T14:54:40Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [June 17, 2025, 3:48pm UTC](https://forums.realmacsoftware.com/t/problems-with-mobile-page-loading/48069/10 "2025-06-17T15:48:50Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [June 17, 2025, 4:04pm UTC](https://forums.realmacsoftware.com/t/problems-with-mobile-page-loading/48069/11 "2025-06-17T16:04:19Z")

</div>

> [@upssjw](#):
>
> should this be referenced in the manual or somewhere in Reveal

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](https://docs.realmacsoftware.com/elements-docs/elements-app/components/built-in-components/reveal#helpful-tip-fixing-horizontal-scroll-on-iphone)!

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [June 17, 2025, 4:22pm UTC](https://forums.realmacsoftware.com/t/problems-with-mobile-page-loading/48069/12 "2025-06-17T16:22:52Z")

</div>

thanks

speedy update
