CSS 100vh is too tall on mobile due to browser UI
Usually the 100vh
height will account for the adjusted height, with is why you'll sometimes see mobile pages go funky when the browser's address bar slides down.
For browsers that don't account for the sliding bar within the vh
unit: The height for the address bars will not be constant across the browsers, so I'd advise against appending -50px
.
Try setting the height of the page (using javascript) with the window.innerheight
property.
function resetHeight(){
// reset the body height to that of the inner browser
document.body.style.height = window.innerHeight + "px";
}
// reset the height whenever the window's resized
window.addEventListener("resize", resetHeight);
// called to initially set the height.
resetHeight();
CSS3 100vh not constant in mobile browser
Unfortunately this is intentional…
This is a well know issue (at least in safari mobile), which is intentional, as it prevents other problems. Benjamin Poulain replied to a webkit bug:
This is completely intentional. It took quite a bit of work on our part to achieve this effect. :)
The base problem is this: the visible area changes dynamically as you scroll. If we update the CSS viewport height accordingly, we need to update the layout during the scroll. Not only that looks like shit, but doing that at 60 FPS is practically impossible in most pages (60 FPS is the baseline framerate on iOS).
It is hard to show you the “looks like shit” part, but imagine as you scroll, the contents moves and what you want on screen is continuously shifting.
Dynamically updating the height was not working, we had a few choices: drop viewport units on iOS, match the document size like before iOS 8, use the small view size, use the large view size.
From the data we had, using the larger view size was the best compromise. Most website using viewport units were looking great most of the time.
Nicolas Hoizey has researched this quite a bit: https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html
No fix planned
At this point, there is not much you can do except refrain from using viewport height on mobile devices. Chrome changed to this as well in 2016:
- https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/BK0oHURgmJ4
- https://developers.google.com/web/updates/2016/12/url-bar-resizing
Mobile browser incorrectly setting max height when using 100vh
I think I have come up with a solution. After reading this article on CSS tricks I eventually combined JavaScript and CSS approach and it seems to correctly set the maximum height.
The trick is to get actual available viewport height after the page loads:
document.addEventListener('DOMContentLoaded', () => {
document.documentElement.style.setProperty('--vh', `${viewportHeight * 0.01}px`)
})
This creates --vh
variable that has 1vh
value calculated from JavaScript. This way, it sets the correct vh
value for mobile browsers that do not include browser UI.
Then I just change #info-panel__list
CSS definition to use this new variable instead of 100vh
like this:
#info-panel__list {
height: 100%;
max-height: calc(
calc(var(--vh) * 100) /* <-- use the new variable */
- var(--header-height)
- var(--calculated-information-height)
- var(--control-height)
);
width: 100%;
overflow: auto;
}
viewport height makes a snappy flicker when scrolling on mobile devices
I battled with this exact same issue a few days ago and the solution I came up with was something like this:
$(window).on('load', function() {
var $vhElement = $("#vhElement"); //Your element with 100vh
var height = $vhElement.height(); //Get rendered height in px
$vhElement.css("height", height + "px"); //Override vh height with px height
});
If you have multiple elements that need this, you can apply a class to all of them and use the following
$(window).on('load', function() {
var $vhElements = $(".vhElement"); //Your elements using vh
$vhElements.each(function() {
var height = $(this).height(); //Get rendered height in px
$(this).css("height", height + "px"); //Override vh height with px height
});
});
CSS `height: calc(100vh);` Vs `height: 100vh;`
There's no difference, since any time the expression calc(100vh)
is calculated, it always ends up being 100vh
.
Related Topics
CSS H1 - Only as Wide as the Text
Load Google Font with <Link> Asynchronously or Deferred Without Font Face Observer
Using CSS Sprites and Background Position
How to Align Jsf Components to Center
How to Maintain Png Alpha Transparency When Using "-Ms-Filter" Property
CSS to Make Images Resize and Fit Any Screen the Same
Ie11 Flexbox Preventing Text Wrapping
How to Force Flex Children Not to Overflow the Container
Twitter Bootstrap - Making CSS Icons Bigger
Keep Div at the Bottom of Another Div - CSS
Validationsummary and Validationmessagefor with Custom CSS Shown When No Errors Present
How to Change Customized Carousel Indicator Background Color
Using Grunt Grunt-Contrib-Less) for Compiling Bootstrap 3.1 Less in Visual Studio 2013
Css: What's a Good Way to Create a Raised Box Effect