www.aizle.co.uk - site is not usable

[webcompat-bot]

URL: https://www.aizle.co.uk/

Browser / Version: Firefox Mobile 63.0
Operating System: Android 8.0.0
Tested Another Browser: Yes

Problem type: Site is not usable
Description: the underlying scroll box stops working, effectively freezing up the whole site (works fine on chrome)
Steps to Reproduce:

1. Navigate to site
2. Tap on one of the "reserve a table" buttons
3. Select an available date & time
4. Click on "next"

From webcompat.com with ❤️

[softvision-oana-arbuzov]

Thanks for the report, I was able to reproduce the issue.

Tested with:
Browser / Version: Firefox Nightly 63.0a1 (2018-07-18), Chrome 67.0.3396.87, Edge 42.0.0.2059,
Operating System: Huawei P10 (Android 7.0) - 1080 x 1920 pixels (~432 ppi pixel density), Samsung Galaxy S7 Edge (Android 7.0) - Resolution 1440 x 2560 pixels (~534 ppi pixel density)

Moving to Needsdiagnosis for further investigation.

[karlcow]

This is not happening on RDM when we put the focus on the side. I suspect that the surface of the touch area makes this happen. But I'm not sure how.

@wisniewskit an idea?

[karlcow]

So this is the content of the iframe which can be scrolled.

<div class="tray-container tray-visible tray-content scroll" id="tray">
  <div class="pure-g section no-padding tray-section">
    <div class="tray-close">
      <a class="reservation-btn btn btn-secondary">Close</a>
    </div>
    <div class="pure-u-md-16-24">
      <h2>Reserve a table</h2>
    </div>
    <div class="tray">
      <div>
        <div class="pure-u-md-4-24">
            …
        </div>
        <div class="pure-u-md-7-24 booking">
          <!-- <iframe class="booking" style="width: 100%; height: 450px;" src="https://widget.resdiary.com/(S(o0plz5mmqgs113nth5ljlk50))/CheckAvailability.aspx?theme=MyTheme&amp;Id=6464" width="300" height="150" frameborder="0">&lt;br /&gt;</iframe> -->
          <iframe class="booking" style="width: 100%; height: 650px;" src="https://7723fded-c4a4-4605-b717-6a890ecd2c71.resdiary.com/widget/Standard/AizleRestaurant/2576" width="300" height="150" frameborder="0">&lt;br /&gt;</iframe>
        </div>
        <div class="pure-u-md-4-24">
            …
        </div>
      </div>
    </div>
    <div class="tray-bg"></div>
  </div>
  <div class="tray-closer">
    <a class="reservation-btn no-underline"></a>
  </div>
</div>

That's interesting I was able to reproduce a couple of times, and then suddenly I can't reproduce at all.

.tray-container.scroll {
	overflow-y: auto;
	width: 100%;
	-webkit-overflow-scrolling: touch;
}

But it's an iframe with flex boxes as parents.

[karlcow]

It resonates a bit with #18316

[karlcow]

@softvision-oana-arbuzov
ah wait this is scrollable on the pixel2 device for me currently.
Either they fixed it, or something is dependent on the device.

[softvision-oana-arbuzov]

@karlcow the issue is no longer reproducible.

Tested with:
Browser / Version: Firefox Nightly 63.0a1 (2018-09-03)
Operating System: Google Pixel (Android 9) - 1080 x 1920 pixels (~441 ppi pixel density), Samsung Galaxy S7 Edge (Android 8.0.0) - Resolution 1440 x 2560 pixels (~534 ppi pixel density)

Closing the issue as Fixed.