NO BUG: Chrome Mobile URL bar impacting sticky (fixed) footer section

Bugs
1

Browser: Chrome 110
OS: macOS / Windows / Linux / etc.
URL: Link to a page that illustrates this issue
Video: Short screen recording that illustrates this issue (free tool: jam.dev)

Hi all,

I have a sticky footer bar built as a Section in Bricks with position: fixed, bottom: 0, left: 0, right: 0. Intention is for a sticky CTA bar at the bottom on mobile devices. It displays correctly on Safari mobile but on Chrome mobile, when the browser’s URL bar hides on scroll, a gap appears between the bottom of the bar and the bottom of the screen, with page content visible through it. See screenshots for visual example.

What I’ve tried:

  • bottom: -1px;
    padding-bottom: env(safe-area-inset-bottom, 0px); — worked briefly, no longer working (maybe due to update from 2.2 to 2.3.1?)

  • transform: translateZ(0) — no effect

  • padding-bottom: env(safe-area-inset-bottom, 0px) — no effect

  • viewport-fit=cover in the viewport meta tag — no effect

  • height set explicitly in px — no effect

  • dvh units — no effect

  • JavaScript repositioning on scroll/resize — no effect

Current section CSS:

css

bottom: -1px;
padding-bottom: env(safe-area-inset-bottom, 0px);

Viewport meta:

html

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

This appears to be related to Chrome’s dynamic toolbar changing the viewport height on scroll. Any help appreciated.

Thanks

First.PNG
First.PNG1179×2556 442 KB

Second.PNG
Second.PNG1179×2556 272 KB

2

Hey @H-ETG,

I don’t think this has anything to do with Bricks and very likely it was not caused with Bricks 2.3.1 version (or is it working for you on 2.3 version)?

If you can provide me with the staging website or if you can replicate it on try.bricksbuilder.io, then I can check if there is anything that we can do.

Thank you,
Matej

3

Hi Matej,

It’s definitely not a Bricks problem. I have seen this on Elementor and other builders as well. It’s a Google Chrome problem.

However, I thought I’d reach out to see if someone has a solution.

I have replicated the footer structure on a trial bricks container. URL here:

To see what i’m referring to, open site on mobile chrome browser (I am using IOS but i am fairly sure it’s present on android too).

The footer CTA Panel (purple) will be stickied to the bottom. Upon scrolling you will see the sticky CTA bar move down (as the URL bar minimises), but then it will move back up. Thus leaving a weird void between it and the actual site, where you will see content in the gap.

Please let me know if you require anything further.

Thanks Matej.

4

Hey @H-ETG,

this is funny; I can’t replicate this on my iPhone 16 Pro. Here is a screen recording: SwissTransfer - Send large files securely and free of charge

Maybe my settings on phone/chrome are different (no idea which ones would be relevant, as I don’t use Chrome).

Also, I’m marking this topic as no-bug, as it’s not something Bricks related.

Thanks,
Matej