bokand/urlbarsizing

An explainer page and demo of how the URL bar interacts with pages on the web

urlbarsizing's Issues

How does OSK fit into this proposal?

More generally, whatever we come up with should be general enough to encompass the OSK and other similar future UI widgets and toolbars.

Desktop browsers too, in fullscreen

Note: These URL bar issues are inherent only to mobile platforms so all the above discussion implicitly applies only to the mobile versions of each browser.

Nope! Firefox in fullscreen has the same problem. Tested it now with

$(window).resize( function() {
  alert("URLBarSizing problem!");
});

The damn thing animates too, so it produced about 14 alerts.

Internet Explorer also has a receding URL bar in fullscreen mode.

Live yet?

Hi David,

My team just so happens to be working on a site that relies on 100vh sections, and I was tasked with looking into the bug that was causing these sections to recalculate their height on mobile when Chrome's address bar slid away. So coming upon this repo was some major serendipity.

From what I can tell this fix went into Chrome 56, but my iPhone is on 56.0.2924.79, and the bug is still there. Am I missing something?

Either way, thanks for advocating for this new behavior, I think it makes a lot more sense than the current model.

position:fixed vh units don't resize with URL bar on Chrome mobile

Hi @bokand, first off thanks for all your hard work on this topic! It seems you're more or less the source of truth on all this.

Secondly, I found an inconsistency between your descriptions of Chrome's behaviour and what I'm observing when I open https://bokand.github.io/demo/urlbarsize.html on recent versions of Chrome mobile on Android. Your 2016 blog post
says that:

... vh lengths ... will also resize to match the visible height taking the URL bar position into account.

And in this github's readme, the "Update and Summary" section is vague and doesn't make mention of the vh-in-position:fixed case. However, further down in the Changes in Chrome 56, you note:

#2 doesn't apply to vh units set on a position: fixed element. They'll still resize in response to the URL bar.

Which agrees with your blog post. However, when I open the test page in chrome, the "viewport-unit position:fixed" bar doesn't change size when the URL bar is shown or hidden! It always stays at the larger size. If I'm understanding correctly, the two position:fixed bars should always be the same size. There's a screenshot at the bottom showing what I mean (sorry it's so big).

Is this a bug in your test page, a regressive bug in chrome, or is this an intentional change in chrome that hasn't been documented here yet?

(As an aside, is it possible to edit your old blog post to add a link to this github page? This seems to be the most up-to-date and is somewhat hard to find!)

How do we handle background on the body element?

e.g. See bug crbug.com/565930. If we don't resize the body, then a background on the body element wont fill the viewport.

First step is to see how this handles on Safari today.

documentElement.clientHeight when position is fixed

Hello,

First, thanks a lot for putting this page together; it's a great resource.

Second, I find that if I have html { position:fixed } and the URL bar is collapsed, then percentage heights adjust to the larger size and document.documentElement.offsetHeight reflects the larger size, but document.documentElement.clientHeight is still the smaller size. To my understanding, it would make more sense for clientHeight to also contain the larger size. Is this effect an intentional piece of this change, or is it a bug?

(How can you get the URL bar to hide with html { position:fixed }, you might ask? It seems that returning from a fullscreened video always gets rid of the URL bar.)

Thanks!

Edge for Android Update

Hi

Just a note on the newest version of Edge for Android v1.0.0.1921

There is both a movable URL bar at the top, and also a movable Menu bar at the bottom of each page.

It seems that the HTML height, if set to 100%, becomes: windowHeight - urlBarHeight, and this does not change. When the menuBar appears at the bottom, the HTML height is recalculated, and the HTML is resized to fit the visible area. From my testing, this causes a reflow of the page

Bug with Modal component and 100vh height

Hello,

I have had trouble with modals on mobile devices when scrolling down and URL bar hides. Buttom of modal is kinda cut off untill I release screen. Then I found your example and noticed that 100vh works great on your example (https://bokand.github.io/demo/urlbarsize.html). But when I recreated similar modal scenario on your example same thing happend.

<div style="
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100vh;
    overflow: hidden auto;
    background-color: #ccc;
    z-index: 100;
"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac odio tempor orci dapibus ultrices in iaculis. At varius vel pharetra vel turpis nunc eget. Viverra maecenas accumsan lacus vel facilisis volutpat. Tortor id aliquet lectus proin nibh nisl condimentum. Magna eget est lorem ipsum dolor sit amet consectetur adipiscing. Amet venenatis urna cursus eget nunc scelerisque viverra mauris. Ac ut consequat semper viverra nam libero justo laoreet sit. Ac auctor augue mauris augue neque gravida in fermentum. Imperdiet nulla malesuada pellentesque elit eget gravida cum sociis. Blandit libero volutpat sed cras ornare arcu. Pharetra vel turpis nunc eget lorem dolor sed viverra. Eget lorem dolor sed viverra ipsum nunc. Egestas erat imperdiet sed euismod nisi. Convallis tellus id interdum velit laoreet. Vitae elementum curabitur vitae nunc sed velit dignissim sodales. Purus sit amet luctus venenatis lectus magna fringilla urna porttitor. Adipiscing at in tellus integer.<br>Eget mi proin sed libero enim sed faucibus. Tempor commodo ullamcorper a lacus vestibulum sed arcu non. In egestas erat imperdiet sed euismod nisi. Amet consectetur adipiscing elit pellentesque habitant morbi tristique. A lacus vestibulum sed arcu non. Fames ac turpis egestas maecenas pharetra. Arcu non sodales neque sodales ut etiam sit amet nisl. Massa massa ultricies mi quis hendrerit dolor magna. Pulvinar mattis nunc sed blandit libero volutpat sed cras. Nunc id cursus metus aliquam eleifend mi in. Aliquet bibendum enim facilisis gravida neque convallis a cras. Leo in vitae turpis massa sed elementum. Iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Malesuada pellentesque elit eget gravida cum sociis natoque penatibus. Et malesuada fames ac turpis egestas. Non pulvinar neque laoreet suspendisse. Nibh tellus molestie nunc non blandit massa enim nec. Donec enim diam vulputate ut pharetra sit amet.</p></div>

If you put this element in your example right after opening body tag (or before closing body tag) and add "overflow: hidden" on body you should see the problem when URL bar is showing and you scroll down.

Problem only happens if modals child height is heigher than modal height and if body has overflow hidden.

Is that how it's supposed to be? If not, how can I fix it?