The height on iPad Chrome is displaying incorrectly

iPad Pro(11-inch), iPadOS version: 16.6.1, Chrome version: 116.0.5845.177
I tried running a simple html file on my iPad and encountered an issue. Despite setting the height to 100vh, a vertical scrollbar appeared on the right side of the screen allowing me to scroll down to an empty page. It seems like the total height is more than 200vh.
The webpage functions properly on Safari, but not on iPad Chrome.

html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div style="background-color: green; height: 100%; width:100%;">This is a div</div>
</body>
</html>

css:

body {
  height: 100vh;
  min-height: -webkit-fill-available;
}

html {
  height: 100vh;
  height: -webkit-fill-available;
}

Answer №1

It's possible that the CSS property

min-height: -webkit-fill-available;
is causing the issue you're experiencing.

To fix this, you can try the following:

body {
  height: 100vh;
}

html {
  height: 100vh;
}

If that solution doesn't work, you can attempt using height: 100%; instead:

body {
  height: 100%;
}

html {
  height: 100%;
}

If the issue persists, you may want to consider using browser-specific CSS properties to target Chrome specifically. Here's an example for targeting Chrome on iOS:

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  /* Target Chrome on iOS */
  body {
    height: 100vh;
  }

  html {
    height: 100vh;
  }
}

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

Spin the connections around a circular path

I'm interested in creating a website where links rotate around a circle, similar to this example: https://i.sstatic.net/103mx.jpg. The links will display different images and texts leading to various URLs. I want the images to form a unified rotation ...

The tabbing feature in bxslider disrupts the alignment of slides, making it

After encountering accessibility issues, I upgraded the bxslider library to version 4.2.3 for better support. Check out this example of bxslider where you can easily tab through the controls: http://jsfiddle.net/qax7w8vt/2/embedded/result/ The problem a ...

Despite utilizing the .img-fluid class, the image remains incompatible with the parent div and does not fit properly

So, I'm currently working on a test code where my aim is to fit an image into the parent div using Bootstrap 5. However, I'm facing a challenge where the image leaves a noticeable gap width-wise, despite using the .img-fluid class. You can see th ...

Notification for EAAccessoryDidConnectNotification is not triggering

Currently, I'm delving into the realm of CoreBluetooth and External Accessories on iOS. Initially, in an attempt to view the devices connected to my phone via Bluetooth, I used print(EAAccessoryManager.sharedAccessoryManager().connectedAccessories) . ...

The parent and child elements both attempted to define the background color, but neither was successful in applying it

Here is the html code snippet: body { font-family: Arial, Helvetica, sans-serif; } header { background-color: rgb(93, 43, 78); background-image: -webkit-linear-gradient(right, rgb(93, 43, 78 ...

PHP/CSS: Backgrounds for DIVs have been implemented, but they appear to be transparent

Update: Check out the link for some old photos here: I have a PHP file where I am creating divs with images as backgrounds using the code below (within a while-loop): echo ' <div class="pic" style="background:url('.$directory.'/'.$ ...

When clicking on a dropdown option, the OnClick event does not seem

When selecting an option from the dropdown, it should retrieve a value from the database and display it in a text field. I implemented a click function which worked in Firefox but not in Google Chrome. HTML: <select id="classi" name="classi"> & ...

What is the best way to ensure that the content fits within a div with a given max-width set by the parent div?

image description goes here I have a container set to a maximum width of 80%, but when the text inside extends beyond that, the container remains stuck at 80% instead of adjusting its size accordingly. Can anyone provide a solution for this issue? ...

Learn how you can store checkbox values in an array when a checkbox is clicked by utilizing AJAX

Creating checkboxes in HTML <input type="checkbox" name="options[cid]" value='1' onChange="chkdeptCount(this.value)" class="test"> <input type="checkbox" name="options[cid]" value='2' onChange="chkdeptCount(this. ...

Using simpleXML to extract HTML code from an XML document

Presented below is content extracted from an xml file: <Cell> <Comment ss:Author="Mark Baker"> <ss:Data xmlns="http://www.w3.org/TR/REC-html40"><B><Font html:Face="Tahoma" html:Size="8" html:Color="#000000">Mark B ...

Aligning inline form controls with Bootstrap and Syncfusion widgets

I'm facing a challenge aligning the Syncfusion JavaScript widget - a dropdownlist - to be displayed inline with the label. I am using Bootstrap 3. I haven't been successful in achieving a nice alignment, meaning getting the middle of the label p ...

I'm curious, which effect or plugin is being used here?

Do you know the name of this particular parallax effect or the plugin used for it? I'm also interested in finding more examples with a similar type of effect, so if you have any tutorials on how to achieve it, that would be greatly appreciated. ...

Using Python's Beautiful Soup library to retrieve text from h1 and id tags

I've been attempting to retrieve the text from an HTML id called "itemSummaryPrice," but I'm having trouble figuring it out. html = "" <div id="itemSummaryContainer" class="content"> <div id=&quo ...

Has window.document.height become obsolete in the latest version of Chrome, version 17?

After recently upgrading to the most recent version of Chrome (17.0.963.56), I've noticed that the property window.document.height is no longer valid. Has anyone else experienced this issue? I haven't been able to find any information about why i ...

Object-C Logo Placed in Navigation Bar

I have been struggling to make my logo fit properly in the Navigation Bar across different phone sizes. It seems to look good on one size but terrible on another. This is the best I've managed so far, but it still doesn't look quite right. Any su ...

Error message indicating that the specified URL beginning with "cdvfile://" is not

Challenge: I'm facing an issue in my app where I need to access an image through Cordova WKWebView. The HTML element in question looks like this. <img src="cdvfile://localhost/library-nosync/MyFolder/file.jpg"> However, when I try to load thi ...

Enhance data validation in PHP

I love using Nicedit as a text editor because it allows me to easily add bold and italic formatting to my form fields. However, when I try to store this text in my database, Nicedit adds HTML tags for bold, italic, and other formatting styles. Is there a ...

JavaScript is failing to match the float and string values

Trying out this code snippet: if(total === balance) { alert("test passed"); } else { alert("test failed"); } In this scenario, total = 10; and balance = 10.00;, yet the output is "test failed". ...

The inner panel height does not extend to 100% when there is overflow

When pressing the submit button on a panel containing components, an overlay appears but does not cover the entire parent panel if scrolled to the bottom. Additionally, I want the spinner to always be centered, whether scrolling or not. I've tried usi ...

printing not displaying colors

Is there a way to maintain the colors while printing my HTML page to PDF? <table class="table table-responsive table-striped"> <thead> <tr> <th>Elev</th> <th>Session n ...