| Summary: | The Smart App Banner breaks CSS for full-viewport web apps | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Chris Rocco <roccoc> |
| Component: | Layout and Rendering | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW --- | ||
| Severity: | Blocker | CC: | bfulgham, simon.fraser, sriramkrish85, thorton, webkit-bug-importer, zalan |
| Priority: | P1 | Keywords: | InRadar |
| Version: | Safari 15 | ||
| Hardware: | iPhone / iPad | ||
| OS: | Other | ||
| See Also: | https://bugs.webkit.org/show_bug.cgi?id=232237 | ||
# Description of the problem: * I have a web application that spans the full height of the viewport. * It needs to know the exact height of the viewport because it is a scrolling carousel of images. * Because the bottom nav collapses, the viewport is resized during scrolling, breaking the UI. * It is possible to prevent the bottom nav from collapses by setting `overflow: hidden` on the body tag, forcing a fixed viewport size. * When the smart app banner is present, however, the bottom nav will still collapse. # Repro Steps: * Use a web page with the styles `body { overflow: hidden }` and enough content in the body so that is scrolls * Verify that scrolling within the body does not cause the bottom nav to collapse * Now open the web page with a smart app banner showing * The bottom nav collapses and the viewport is resized