[BUG] Cropped shopping cart in Venia for larger phones

[ericerway]

Checkout button is cropped in Venia with larger phones including iPhone XR. Safari navigation covers this next step in the checkout process and needs to be aware relative to it's own navigation.

URL tested: https://veniapwa.com/jillian-top.html

Open URL on Browserstack

Property	Value
Device	iPhone XR
Browser	Mobile_safari
Operating System	iOS 12.0
Resolution	828 x 1792 px
Screen size	6.1 in - 2.56 x 5.54 in
Viewport	414 x 896 dp
Aspect Ratio	19.5 : 9

Screenshot Attached
Screenshot URL

Click here to reproduce the issue on Browserstack

[sirugh]

Ew. Probably https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ ?

[zetlen]

Some additional context from #1114 which I've closed as a duplicate of this:

Screenshots of iOS and Android simulators

Additional context
Modern browser frames expand and contract in response to gestures. They also have partial transparency, which requires rendering a portion of the viewport under them. Layouts like flex and grid often expect to calculate their interior dimensions using the exact viewport height, so this measurement is very important. Browser vendors have conferred about it, and have settled on using the largest measurement possible, which is a more broadly compatible, if imperfect, solution.

Possible solutions

• A Peregrine hook to subscribe full-height elements to resize events and measure window.innerHeight (@jimbo may have input on whether this fits Peregrine's new roadmap)
• Using overflow-y: scroll wherever possible
• Placing call-to-action elements like buttons within a more restricted area of the viewport, like TV production uses a safe area for important content

[dpatil-magento]

@jimbo @sirugh Please check below observations -

1. Desktop chrome browser > Home page, search results, category page shifts left on accessing Left/Right drawer.

2. On Android - When user access shipping form and tap on Name field - Form shifts up and user cant see whats being typed. (Tried on actual device and also on browser stack virtual device. )