1871448 - Unable to confirm an adress on www.foodora.cz due to button being outside the viewport and parent container unscrollable

Status: NEW

(Web Compatibility :: Site Reports, defect, P1)

Description

[Ksenia Berezina [:ksenia]]

We've got a report in https://github.com/webcompat/web-bugs/issues/130975 where a user is unable to pick an address and make an order since the button to confirm the address is outside of the viewport and it's impossible to scroll to it.

To reproduce:

1. Visit https://www.foodora.cz/en/restaurant/a1wt/indicka-restaurace-everest in Firefox Nightly (123.0a1) in RDM or on the actual device.
2. Click on the plus sign to add a meal, wait for "What's your address?" to appear and click on "Add an address".
3. Move the map to a nearest building to make sure it picks up the address.

Expected:
Can scroll to "Find vendors" button underneath the map.

Actual:
The button parent container is unscrollable, can't reach the button.

Comment 1

[Ksenia Berezina [:ksenia]]

Attachment: 130975.html

I've attached a slightly reduced testcase (reproducible on RDM as well).

Comment 2

[Ksenia Berezina [:ksenia]]

Thinking this could be related to bug1663634

Comment 3

[Emilio Cobos Álvarez (:emilio)]

Not really, this looks like grid layout not sizing the scroll container (.content) correctly here. Daniel, Ting-Yu, you've been looking at grid issues recently, and flexbox has similar rules IIRC. Any chance you can take a look?

Comment 4

[Ting-Yu Lin [:TYLin] (PST, UTC-8)]

It seems max-height: 100% on the grid container .wrapper made the grid item .content unable to scroll. If I change max-height: 100% to height: 100%, it works as expected.

Flex container works well on this testcase. I test it via adding display: flex; flex-direction: column; to .wrapper, and I can scroll the .content flex item.

Comment 5

[Daniel Holbert [:dholbert]]

The issue is roughly this:

• the grid's height is indefinite (content-based), though its constrained by max-height:100%
• that means its grid-row (sized to fill the grid with 1fr) and grid item (sized to fill the containing block with height:100%) are also effectively indefinitely-sized and size-to-content.
• So we don't end up resolving the height:100% on the grid item to actually be the (max-height-constrained) size of the parent grid.

I think this is essentially a form of bug 1481876.

(I also don't think it's actually related to the viewport-compat bug, even though the results are similar.)

Comment 6

[Dennis Schubert [:denschub]]

We know what the underlying issue is here, so let's try to build a site patch.

Comment 7

[Ksenia Berezina [:ksenia]]

A sitepatch is shipped in bug1876363