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

How can CSS positioning be utilized to align lines accurately?

Recently, I created a basic jsbin to draw a line connecting two points. It doesn't rely on any drawing libraries; just plain JavaScript and jQuery. I managed to calculate the angle using code I found in this library. When dragging the circle at the ...

javascriptjqueryhtmlcss

Stop images from appearing transparent when placed inside a transparent div

My issue is clearly visible in this image: The div element is transparent and affecting the images inside it. Below is my HTML code: <div id="cselect" style="position: absolute; top: 99px; left: 37px; display: block;"> <div class="cnvptr"> ...

javascriptjqueryhtmlcss

Positioning a div at the bottom of a webpage without using absolute positioning in HTML

Check out the fiddle. I've included some CSS to position the tab on the right side. My goal was to have those tabs in the lower right corner of the container. If I use absolute positioning for the div, it messes up the tab content width. I tried ad ...

javascriptjqueryhtmlcss

Using CSS transform to enhance Flash content

I am currently working on a web application that is contained within an iframe. The iframe has been scaled using -webkit-transform:scale(0.8), which is functioning well. However, I am encountering an issue with the flash audio recorder within the iframe no ...

cssflashtransformscale

The twitter card is failing to display the metadata that I have supplied

I'm facing an issue with my webpage and I can't seem to pinpoint the cause. Here's the link to the page on Interestingly, provides clear results If you're curious about the meta fields, you can check them out at this link: When I sh ...

twitternext.jsmeta-tags

Using the Next.js frontend framework to make an axios GET request to fetch data from Str

import axios from "axios"; import Head from "next/head"; import * as React from "react"; import * as Material from "@mui/material"; import IconButton from '@mui/material/IconButton'; import Badge from &apos ...

reactjsaxiosnext.jsstrapi

Identify the CSS class for the ionic component on the webpage

Currently, I am in the process of developing an application using ionic 2 and angular 2. Within this app, I am utilizing the ionic 2 component known as ModalController. Unfortunately, I have encountered a challenge when attempting to adjust the size of th ...

javascriptcssangulartypescriptionic2

Develop a dynamic button using JavaScript to fetch information from an array

I'm struggling with incorporating this button creation code into my HTML using JavaScript. The code for creating the button element in JS file looks like this: var numery = ['A','B','C']; var numer = document.createE ...

javascripthtmlcssappend

How can Swiper efficiently display the next set of x slides?

After exploring SwiperJS at https://swiperjs.com/, I've been unable to locate an option that allows the slide to return immediately to the right once it goes out of view on the left. The current behavior poses a problem where there is no next slide o ...

javascriptnext.jsswiper.js

Learn how to utilize Javascript to easily drag and drop an image within the same block

I am encountering an issue with dragging and dropping images or swapping them using JavaScript. I have tried to implement this in the code below, where clicking on icons moves them onto a colored div. However, I am now trying to drag and drop the images wi ...

javascriptjqueryhtmlcss

Customizing Easing and Timing Functions in Slide Transition Component: MUI

Is there a way to incorporate easing effects into the Material-UI Slide component? I can't seem to find any specific props for that. However, I vaguely recall reading about spreading props as a possible solution? <Slide in={variable} timeout={5 ...

reactjsmaterial-ui

What is the best way to display the legend on my PieChart?

I am attempting to display the names of colors in my PieChart as a legend. Here is the JSON data: { "choice": "20-29 yrs. old", "count": 4 }, { "choice": "30-39 yrs. old", "count": 2 }, { "ch ...

javascriptreactjsmaterial-uirecharts

The mouseenter event in jQuery is failing to trigger

I'm encountering an issue with the mouseenter event on a div section of my webpage. I am attempting to alter the background color of this div when the mouse enters, but it seems to be disregarded. This is the basic HTML code: <div id="services" c ...

javascriptjquerycsshtml

Guide on expanding color options with a tailwindcss plugin

My intention is to make an API call in order to fetch some colors, which will then be incorporated into the theme's color palette. const plugin = require('tailwindcss/plugin') const getColors = async ()=>{ // Testing function that ...

next.jstailwind-cssheadless-cms

Empower the parent container to wrap around its child elements using Flexbox

I am trying to make the flexbox parent item adjust its width based on the children, but currently it is stretching out to full width and leaving empty space on the right side. Here is the CSS code I have tried: .flexParent { display:flex; background:# ...

htmlcssflexbox

The TextField component in MUIv5 is showing some frustrating white space in the corners

I've integrated the MaterialUI_v5 library and included a TextField component within a Paper component. The background of the Paper component has been customized to appear in a shade of green. For the Textfield component, I have applied a styling tha ...

cssreactjsmaterial-ui

Issue with MUI-table: The alternate rows in the MUI table component are not displaying different colors as intended

Struggling to apply different colors for alternate table rows function Row(props) { const { row } = props; const StyledTableRow = styled(TableRow)(({ theme }) => ({ '&:nth-of-type(odd)': { backgroundColor: "green", ...

javascriptreactjsuitableviewmaterial-ui

What is the best way to align flexbox to the left?

I'm having trouble aligning the FileCard component to the start of the container. I attempted using flex-start in my styling, but the FileCards are still centered. This is the current code snippet: <div v-if="posts" ...

cssvue.jsflexbox

What is the process behind managing today's Google image of the day?

After coming across the javascript picture control on the Google search page, I became interested in replicating it myself. The feature zooms in on a picture when hovering over it, but I couldn't locate the HTML code they were using for it. Is there ...

javascripthtmlcss

Tips for incorporating a CSS transition when closing a details tag:

After reviewing these two questions: How To Add CSS3 Transition With HTML5 details/summary tag reveal? How to make <'details'> drop down on mouse hover Here's a new question for you! Issue I am trying to create an animation when t ...

javascriptjqueryhtmlcsstransition