iOS Chrome calculates the wrong height of html

HTML & CSS
1

In order to fill the whole height of the page, I use height: 100%; for html and body tags, and it works fine until a browser would be closed and reopened.
I don’t use 100vh because of issues on mobile devices.

Steps to reproduce:

  • Open https://angelika94.github.io/rick/ in Google Chrome on iPhone (you will see that navigation (Morty and Beer) is placed on the bottom of the page)

  • Close the browser and remove it from multitasking navigation.

  • Open the browser again (you will see that bottom navigation moved off the “first screen” and now you need to scroll to see it)

screenshot of css Rick without navigation

image
image720×1280 101 KB

The page will be fixed by itself in these cases:

  • Rotate the device to landscape

  • Open and close browser’s navigation by tabs

  • Close and reopen browser without closing it in multitasking nav

Why does it happen? How can I fix this behavior?

Here is the code https://jsfiddle.net/b1w3ktdu/6/

Thank you in advance!

2

I don’t use Chrome on the iphone so am unfamiliar with multitasking navigation and didn’t know what that meant :). I did load chrome on my iphone5s and I couldn’t really get it to go wrong except when the address bar floats over the content (as in safari ios) but that’s a known behaviour anyway.

All browsers on IOS are essentially -webkit wrappers anyway as that is all apple allows so they should mostly render the same.

Fixed positioned footers have always been an issue on mobile as you get the address bar at the bottom overlaying the content rather than reducing the available height. Also there is no different issue with VH as there would be in 100% because they both achieve the same thing except that for vh you don’t need the unbroken chain of heights back to root.

The only suggestion I could offer is to use position:sticky instead which seems to be handled better than fixed positioned but I dare say you will probably run into the same issues. It would require some modification to the html.

Edit:

Codepen deleted as user not returned.

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

*,
*::after,
*::before {
  box-sizing: border-box;
}

:root {
  --main-bg-color: #4381af;
  --hair-color: #9fd4ec;
  --skin-color: #d7c9b7;
  --brow-color: var(--hair-color);
  --t-shirt-color: #80d8d6;
  --border-width-default: 0.3em;
  --border-width-thin: 0.2em;
  --border-width-bold: 0.4em;
}

html {
  height: 100vh;
  overflow: hidden;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--main-bg-color);
  font-family: sans-serif;
  height: 100vh;
  overflow: hidden;
}
.wrap {
  flex: 1 0 0;
}
.links {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  z-index: 21;
  margin-left: auto;
}

h1,
h2 {
  margin: 0.5rem 0;
  text-align: center;
  color: #fff;
  display: block;
}

h1 {
  font-size: 3rem;
}

h2 {
  font-size: 1rem;
}

a,
a:visited {
  color: bisque;
}

.main {
  margin-top: auto;
  font-size: 63%;
}

@media (max-width: 600px) {
  .main {
    font-size: 50%;
  }
}

.paper {
  width: 40em;
  height: 66.5em;
  overflow: hidden;
}

.head {
  padding-top: 16em;
  position: relative;
  z-index: 2;
}

.strand {
  background-color: var(--hair-color);
  border: var(--border-width-default) solid #000;
  position: absolute;
  border-right-color: transparent;
  border-top-color: transparent;
}

.strand-1 {
  width: 4em;
  height: 6em;
  bottom: 10%;
  left: 26%;
  transform: skew(-38deg) rotate(7deg);
}

.strand-2 {
  width: 4em;
  height: 6em;
  bottom: 15%;
  left: 23%;
  transform: skew(-38deg) rotate(-6deg);
}

.strand-3 {
  width: 10em;
  height: 8em;
  bottom: 23%;
  left: 17%;
  transform: skew(-38deg) rotate(25deg);
  border-bottom-width: var(--border-width-thin);
}

.strand-4 {
  width: 9em;
  height: 10em;
  bottom: 35%;
  left: 17%;
  border-bottom-width: var(--border-width-thin);
  transform: skew(-37deg) rotate(37deg);
  border-right: transparent;
}

.strand-5 {
  width: 7em;
  height: 6em;
  bottom: 47%;
  left: 13%;
  transform: skew(43deg) rotate(102deg);
}

.strand-6 {
  width: 12em;
  height: 10em;
  bottom: 53%;
  left: 17%;
  transform: skew(43deg) rotate(126deg);
}

.strand-7 {
  width: 9em;
  height: 19em;
  bottom: 46%;
  left: 40%;
  transform: skew(-48deg) rotate(131deg);
  border-left-width: var(--border-width-thin);
  border-bottom-width: var(--border-width-bold);
}

.strand-8 {
  width: 9em;
  height: 15em;
  bottom: 37%;
  left: 55%;
  transform: skew(-43deg) rotate(170deg);
}

.strand-9 {
  width: 9em;
  height: 15em;
  bottom: 26%;
  left: 63%;
  transform: skew(-33deg) rotate(197deg);
}

.strand-10 {
  width: 9em;
  height: 11em;
  bottom: 15%;
  left: 63%;
  transform: skew(-33deg) rotate(215deg);
}

.strand-11 {
  width: 6em;
  height: 6em;
  bottom: 10.4%;
  left: 64%;
  transform: skew(-3deg) rotate(275deg);
}

.strand-12 {
  width: 3em;
  height: 3em;
  bottom: 5.5%;
  left: 64%;
  transform: skew(-3deg) rotate(285deg);
}

.face {
  margin: auto;
  width: 20em;
  height: 32.5em;
  border-top-left-radius: 40% 30%;
  border-top-right-radius: 59% 37%;
  border-bottom-left-radius: 40% 28%;
  border-bottom-right-radius: 55% 38%;
  border: var(--border-width-default) solid #000;
  background-color: var(--skin-color);
  position: relative;
  z-index: 1;
}

.brow {
  width: 8em;
  height: 2em;
  position: absolute;
  border-radius: 32% / 30px;
  border: var(--border-width-default) solid #000;
  background-color: var(--brow-color);
  z-index: 2;
}

.brow--left {
  top: 25%;
  left: -3%;
  border-right-color: transparent;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  transform: rotate(13deg);
}

.brow--right {
  width: 8em;
  top: 24.7%;
  left: 35%;
  border-left-color: transparent;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  transform: rotate(-16deg);
}

.eye {
  width: 8.5em;
  height: 8.5em;
  border-radius: 50% 47%;
  border: var(--border-width-default) solid #000;
  background-color: #fff;
  position: absolute;
  top: 26%;
  z-index: 1;
}

.eye::before,
.eye::after {
  content: "";
  width: 1em;
  height: 1em;
  position: absolute;
  top: 34%;
  left: 30%;
  background-color: #000;
  border-radius: 27%;
  animation: i-see-you 5s infinite ease-in-out;
}

.eye::after {
  transform: rotate(45deg);
}

.eye--left {
  left: -8%;
}

.eye--right {
  left: 38%;
}

.bag {
  width: 6em;
  height: 4em;
  position: absolute;
  border: var(--border-width-default) solid #000;
  border-top-color: transparent;
  border-right-color: transparent;
  border-radius: 50% 47%;
  transform: rotate(16deg);
  background: var(--skin-color);
  z-index: 0;
}

.bag--left {
  top: 44.5%;
  left: -4%;
}

.bag--right {
  width: 7em;
  height: 6em;
  top: 39%;
  left: 48%;
  transform: rotate(-15deg);
  border-radius: 50%;
  border-left-color: transparent;
}

.ear {
  width: 5.5em;
  height: 5.5em;
  border-radius: 50%;
  border: var(--border-width-default) solid #000;
  background: var(--skin-color);
  position: absolute;
}

.ear--left {
  width: 5em;
  height: 5em;
  left: 20%;
  top: 70%;
  z-index: 0;
}

.ear--right {
  top: 54%;
  z-index: 1;
  right: -9%;
  border-left-color: transparent;
  border-top-color: transparent;
  transform: rotate(-44deg);
}

.nose {
  width: 1.6em;
  height: 5.5em;
  position: absolute;
  top: 50%;
  left: 26%;
  border: var(--border-width-default) solid #000;
  border-top-color: transparent;
  border-top-left-radius: 21% 30px;
  border-top-right-radius: 0% 20px;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 75%;
  transform: skew(-10deg, 55deg) rotate(5deg);
  border-right-width: var(--border-width-thin);
  border-left-width: var(--border-width-thin);
}

.lip {
  width: 13em;
  height: 3em;
  border: var(--border-width-default) solid #000;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
  border-top-left-radius: 38% 20px;
  border-top-right-radius: 59% 37%;
  position: absolute;
  top: 74%;
  left: 4%;
  transform: rotate(4deg);
}

.cheek {
  width: 16em;
  height: 5em;
  border-radius: 50%;
  border: var(--border-width-default) solid transparent;
  position: absolute;
}

.cheek--left {
  top: 65%;
  left: 1%;
  transform: rotate(-10deg);
  border-left-color: #000;
}

.cheek--right {
  top: 62%;
  left: -6%;
  transform: rotate(20deg);
  border-right-color: #000;
}

.neck {
  width: 6em;
  height: 6em;
  border: var(--border-width-default) solid #000;
  background-color: var(--skin-color);
  position: absolute;
  left: 40%;
  top: -32%;
  border-bottom-left-radius: 49% 9px;
  border-bottom-right-radius: 30% 9px;
  z-index: 2;
}

.body {
  margin: 2em auto 0;
  width: 23em;
  height: 17em;
  position: relative;
  z-index: 0;
}

.shirt {
  width: 19em;
  height: 12em;
  position: absolute;
  border: var(--border-width-default) solid #000;
  background-color: #fff;
}

.shirt--left {
  top: 17%;
  left: -15%;
  transform: skew(-28deg) rotate(72deg);
  border-bottom-left-radius: 5%;
}

.shirt--right {
  top: 18%;
  left: 36%;
  transform: skew(28deg) rotate(-72deg);
  border-bottom-right-radius: 5%;
}

.shirt-decor {
  width: 3em;
  height: 3em;
  position: absolute;
  z-index: 1;
}

.shirt-decor--left {
  width: 22em;
  height: 2.6em;
  position: absolute;
  border-top: var(--border-width-thin) solid #000;
  border-left: var(--border-width-bold) solid #000;
  top: 42%;
  left: -17%;
  transform: skew(42deg) rotate(-38deg);
}

.shirt-decor--right {
  height: 19em;
  width: 2.7em;
  position: absolute;
  border-bottom: var(--border-width-bold) solid #000;
  border-right: var(--border-width-thin) solid #000;
  top: -4%;
  right: 27%;
  transform: skew(-44deg) rotate(-49deg);
}

.t-shirt {
  width: 7em;
  height: 19em;
  position: absolute;
  border: var(--border-width-bold) solid transparent;
  border-left-color: #000;
  border-top-left-radius: 32% 110%;
  border-bottom-left-radius: 19% 45%;
  transform: rotate(4deg);
  z-index: 1;
}

.t-shirt--left {
  left: 33%;
  top: -6%;
  box-shadow: inset 6em 0 0 var(--t-shirt-color);
}

.t-shirt--right {
  left: 59%;
  top: -5%;
  border-top-left-radius: 25% 110%;
}

.sleeve {
  width: 3em;
  height: 11em;
  border-left: var(--border-width-default) solid #000;
  position: absolute;
  z-index: 1;
}

.sleeve--left {
  top: 40%;
  left: 9%;
  transform: rotate(3deg);
}

.sleeve--right {
  top: 50%;
  right: 0%;
  transform: rotate(-3deg);
}

/* The animation code */
@keyframes i-see-you {
  0%,
  40%,
  100% {
    left: 34%;
    top: 40%;
  }

  10%,
  30% {
    top: 44%;
    left: 40%;
  }
}

.links img {
  max-width: 60px;
  max-height: 100px;
}

<div class="wrap">
  <h1>Rick in CSS</h1>
  <h2>by <a href="https://www.linkedin.com/in/anzhelika-kirichuk-18892558/">Anzhelika Kirichuk</a></h2>
  <div class="main">
    <div class="paper">

      <div class="rick">
        <div class="head">
          <div class="hair">
            <div class="strand strand-1"></div>
            <div class="strand strand-2"></div>
            <div class="strand strand-3"></div>
            <div class="strand strand-4"></div>
            <div class="strand strand-5"></div>
            <div class="strand strand-6"></div>
            <div class="strand strand-7"></div>
            <div class="strand strand-8"></div>
            <div class="strand strand-9"></div>
            <div class="strand strand-10"></div>
            <div class="strand strand-11"></div>
            <div class="strand strand-12"></div>
          </div>
          <div class="face">
            <div class="brow brow--left"></div>
            <div class="brow brow--right"></div>

            <div class="eye eye--left"></div>
            <div class="eye eye--right"></div>

            <div class="bag bag--left"></div>
            <div class="bag bag--right"></div>

            <div class="ear ear--right"></div>

            <div class="nose"></div>

            <div class="cheek cheek--left"></div>
            <div class="lip"></div>
            <div class="cheek cheek--right"></div>
          </div>
          <div class="ear ear--left"></div>
        </div>
        <div class="body">
          <div class="neck"></div>
          <div class="shirt shirt--left"></div>
          <div class="sleeve sleeve--left"></div>
          <div class="shirt-decor shirt-decor--left"></div>
          <div class="t-shirt t-shirt--left"></div>

          <div class="t-shirt t-shirt--right"></div>
          <div class="shirt-decor shirt-decor--right"></div>
          <div class="sleeve sleeve--right"></div>
          <div class="shirt shirt--right"></div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="links">
  <a href="https://angelika94.github.io/morty/index"><img src="https://raw.githubusercontent.com/angelika94/angelika94.github.io/master/morty.png" alt="Morty"></a>
  <a href="https://angelika94.github.io/beer-js/index"><img src="https://raw.githubusercontent.com/angelika94/angelika94.github.io/master/beerjs.png" alt="beer js"></a>
</div>

However I don’t really think it will make a difference. I often have to refresh sites on ios to get them back to square one especially after rotating or scrolling.

It may be that you need a JS fix and get the available viewport height instead if this issue is important to you.

1 Like
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.