Bug 272851 – bankdhofar.com: User can erroneously scroll horizontally on iPad and macOS and get stuck

• Status: NEW
• Component: Layout and Rendering

[Ahmad Saleem]

Created attachment 470969 [details]
Broken Homepage (horizontal space)

Hi Team,

Steps to reproduce:

1) Visit: https://bankdhofar.com

2) Scroll horizontally - it shows 'grey' area

3) On iPad - it shoes horizontal space

Expected Result:

Chrome Canary 125 and Firefox Nightly 127 don't show this, so match them.

Actual Result:

See reference picture.

____

Thanks!

[Karl Dubost]

Created attachment 470979 [details]
reducing the layout

[Karl Dubost]

Created attachment 470980 [details]
screen recording of the issue

Currently there is this code:

@media screen {
    .loan-modal {
        position: absolute;
        top: -12px;
        right: -12px;
        width: 1px;
        height: 1px;
        background: #fff;
        border-radius: 16px;
        transition: all 0.7s ease;
        z-index: 999;
        border: solid 1px transparent;
    }
}

which is supposed to put out of view the loan modal but create a scrollable context.

If we apply display: none on this, the site displays correctly.

[Karl Dubost]

On Firefox it doesn't create the scrollable context.

[Radar WebKit Bug Importer]

<rdar://problem/126664128>

[zalan]

Created attachment 471073 [details]
Test reduction

[zalan]

The combination of allowing rubber-banding and "overflow: hidden auto" causes this bug.