WIP: Problem displaying offcanvas in iPhone browsers

Bugs
1

Browser: Chrome 134.0.6998.88
OS: Windows

I have an offcanvas in the header with these settings. The header is set to sticky.

The problem is that in iPhone browsers (e.g. Safari and Chrome), if we go to the bottom of the page (footer) and try to open offcanvas, it opens completely corrupted. While according to the settings, it is expected to open from the bottom. But in Android browsers it works exactly as expected.

This bug seems to be directly related to the “Slide up after (px)” option in Header. In Android browsers, when we reach the bottom of the page, the header is hidden according to the “Slide up after (px)” option. But in iOS browsers, when we reach the bottom of the page, the header appears. Now if we click on the offcanvas toggle, Offcanvas breaks.

Please see this link. I hope you are successful in reproducing.

c
c414×857 27.2 KB

2

Hi Hosein,
Thanks so much for your report!

What happens if you move the offcanvas out of the header and place it somewhere else, e.g. the footer?

Best regards,
timmse

3

Hi timmse,

This problem seems to only occur if Offcanvas is in the header.

4

Ok, I already assumed that. However, as two of us can’t replicate the issue using your settings from the screenhots, please provide the template.json of your header template.

5

Hi timmse,

Header template

6

Thanks so much for the template! With this we can at least partially reproduce the problem, even if not always. I have created a task. I wish you a relaxed, Bricks-free weekend :slight_smile:

1 Like