The svh/lvh units are experiencing unexpected issues when using Chrome on an iPhone

I'm facing an issue with my hero section that is supposed to take up the full height of the viewport. I recently tried using the new svh/lvh units, which seemed to work fine on desktop and Safari for mobile. However, when testing on Chrome for mobile (specifically on an iPhone), the hero section initially displays correctly but then resizes as I scroll down, causing other elements on the page to move due to the appearance of the navigation bar at the bottom.

Here's the code snippet for the container of the hero section:

<Box
      // ref={observe}
      sx={{
        width: "100vw",
        height: "100vh",
        width: "100svw",
        height: "100svh",
        position: "relative",
      }}
    >

Although using height: fill-available; solves the problem on Chrome mobile, it causes issues on other browsers.

I even removed the fallbacks 100vh and 100vw to ensure that the mobile browser was indeed using the correct svh units, which it was.

Any insights into what might be causing this behavior?

cssnext.jsmobilematerial-uiviewport

Answer №1

I understand your point and agree that the svh behavior in Safari is beneficial, as it ensures the smallest viewport height possible.

To tackle this issue, I had to set the height of a hero div statically to match the minimum dimensions of the viewport, taking into account variables like the open address bar. This prevented any unwanted changes in height while scrolling with the browser's UI disappearing.

My solution involved using JavaScript during the initial page render, utilizing window.visualViewport. It had to be placed where both the element and visualViewport were accessible—potentially within a delayed setTimeout, depending on the elements' rendering process.

if (window.visualViewport) {
   const elements = document.getElementsByClassName("your-small-view-height-div");
   for (let i = 0; i < elements.length; i++) {
      elements[i].setAttribute("style", `min-height: ${window.visualViewport.height}px`);
   }
} else {
   // apply a fallback class to body with css styling for svh
   document.body.classList.add("use-svh");
}

This approach helped me cache the necessary value for mobile view optimization, although it might not be applicable to desktop views. After experimenting with different methods over a few days, this technique proved effective for my needs.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am facing issues with the Material UI makeStyles when attempting to import it

Hello there! I'm currently experimenting with Material UI and running into some issues while trying to use the makeStyles module. Here's the snippet of code that's giving me trouble: App.js code Additionally, here is the code from the packa ...

reactjsmaterial-ui

The discrepancy in percentages by a single pixel within Webkit

I am facing an issue with the positioning of two div elements. The first one has a height of 40% and the second one has a height of 60%. I have set the first element to be positioned at top: 0; and the second one at bottom: 0;. However, in Webkit browsers, ...

htmlcsswebkit

What is the best method for creating uniform cards with different amounts of text that won't cause overflow issues?

At the moment, I have a container that acts as a boundary for a group of cards: .cards-container { display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap; margin-top: 20px; border: 5px solid violet; } .card { ...

htmlcssreactjs

Step-by-step guide on duplicating a div a set number of times

I am looking to replicate the entire div multiple times (e.g., on an A4 paper, top left corner, top right corner, bottom left corner, and bottom right corner). <script language="javascript" type='text/javascript'> function updateD ...

javascriptasp.netcss

Difficulty arises with z-index when hover effects are applied to clip-path shapes

I'm encountering an issue where I am attempting to make two clip path polygons overlap each other when hovered over by the mouse. I have been using z-index values and trying to adjust them based on which overlay is being hovered over, but unfortunatel ...

htmlcssz-indexclip-path

What could be causing these "areas" or "panels" to intersect with each other?

As I work on constructing a website, I'm facing an issue with the top two sections. They appear correctly when my screen is full size, but as soon as I adjust the screen size, they jump down and create white space. It seems like I may have approached ...

htmlcss

Implement a transition effect for when elements change size using the `.resizable().css` method

I attempted to incorporate a deceleration effect when resizing an element back to its original size using the resizable method. The slowdown effect should only trigger during the click event (when the "Click-me" button is pressed), not while manipulating ...

javascripthtmljquerycss

Problem with alternating row colors in my table

Trying to add some style to my table on the webpage by alternating row colors, but I'm running into some issues. I've followed tutorials and tried using different CSS selectors like nth-of-type(even), nth-of-type(2n+0), and nth-of-type(odd). Howe ...

htmlcss

HTML div ID displaying incorrectly

My main div on the page has the attribute align="center", but it does not seem to align in the center. If you'd like to see the page for reference, click here. This is the CSS: #page{ background-color: #4C1B1B; width:85%; height:500px; ...

csshtmlalignment

I must modify the initial statement to appear in bold from the paragraph with the use of JavaScript and CSS

Mr. XYZ and Mrs. ABC are known for their integrity. They own a stylish car. In the next paragraph, I would like to emphasize the first sentence by making it bold, We admire our exceptional leader J.K.L. He shows great potential. In this section, I wan ...

javascripthtmlcssnode.js

Implementing position sticky on a div depending on its content text - step by step guide

If the text inside the .newsDate matches the previous or next .newsDate, I want to make its position sticky when scrolling, until it reaches the next .newsMiddleCont div. What I'm trying to achieve: The same date on multiple news items should s ...

javascripthtmljquerycss

Organize Radio Selectors

My intention was to align the radio buttons as shown in the image below: https://i.stack.imgur.com/oPTjD.jpg However, the final result looked like this https://i.stack.imgur.com/Mixga.jpg Below is the code for your reference HTML <div class="form ...

htmlcssangular

Retrieving fresh CSS data from earlier animated elements within a Greensock timeline

In my code, I am using a TimelineLite() to perform a series of sequential tweens with .to(). What I want to achieve is accessing the output value from one of the early tweens in order to use it for constructing later tweens. Is there any way to retrieve t ...

javascriptjquerycssanimationgsap

Accelerate Yahoo Finance using NextJS

I recently tested the loading speed of a page on my blog using Google PageSpeed Insights and was shocked by the results. It reported that it takes nearly 6 seconds to load, although in reality, the page opens much quicker than that. My goal is to have thi ...

webpacknext.jsyahoo-finance

What are the best ways to change the styling of jquery ui widgets?

Currently utilizing jQuery UI, I have encountered an issue with the font size within a dialog. When utilizing the standard settings, the font size appears to be excessively large. To address this, I used the element inspector to identify the class name o ...

jquerycssjquery-ui

transmit the information contained in the request

Within this code snippet, I am facing an issue with sending data to the request. The data being sent is present and visible in the console, but the problem arises when it comes to the "slice" file. It seems that the file is unable to receive the data and i ...

reactjsaxiosmaterial-ui

What is causing the issue with my CSS keyframe animation not functioning correctly when using `animation-direction: reverse`?

Exploring the use of animation-direction: reverse to streamline my CSS keyframe animation process. An interesting scenario arises when a container div is clicked, toggling an "active" class using jQuery to trigger the animation in either forward or backwar ...

csscss-animations

Listening for position changes using jQuery events

It is essential to be able to track the relative position of elements, especially when dealing with dynamic layout issues. Unfortunately, there are no built-in options in CSS to listen for changes in position() or offset() attributes. Reason: Changes in a ...

jquerycssposition

Can a Django form be configured to hide submitted values using display:none?

As I was working on submitting a form in Django with multiple details, I came up with the idea to split it into sections. The first set of details would be hidden initially, and upon clicking the next button, the next set of details would be displayed fo ...

htmlcssdjango

Having issues with jQuery not functioning on this specific web page across all browsers. The reason behind this puzzling dilemma remains elusive to me

I am experiencing issues with the functionality of my website. The buttons with + signs are meant to be drop-down toggles, and the mini-tabs below them should work as tabs. Additionally, the sample images at the bottom are not loading properly when clicked ...

javascriptjquerycssdebugging