CSS fix for 100vh in Safari | Matt Smith

Important Caveat: YMMV on this trick. Matt himself notes that there are potential issues and there's a discussion with Šime in the comments which highlights actual problems in Chrome on Android. With that said, the whole "Safari ignores 100vh" issue is a pain and this is a simple workaround that may have some applications:

body {
  min-height: 100vh;
  /* mobile viewport bug fix */
  min-height: -webkit-fill-available;
}

Obviously, body can be whatever element you want. The hope is that the -webkit prefix here is good enough for all other browsers to ignore it. Whether or not that's true is, as I mentioned, debatable.

Explore Other Notes

Newer

How to tame line-height in CSS

An interesting read that covers some of the basic terminologies of typesetting, as well as the technicalities of how browsers actually interpret the line-height value. Hint: it's not what you'd […]

Older

Deno 1.0

There has been a lot of web chatter around the launch of Deno, the new JavaScript runtime engine. Their introductory blog post does a great job of explaining when you should use it (and conversely […]
  • <strong>Important Caveat</strong>: YMMV on this trick. Matt himself notes that there are potential issues and there's a discussion with Šime in the comments which highlights actual problems in […]
  • Murray Adcock.
Journal permalink

Made By Me, But Made Possible By:

CMS:

Build: Gatsby

Deployment: GitHub

Hosting: Netlify

Connect With Me:

Twitter Twitter

Instagram Instragram

500px 500px

GitHub GitHub

Keep Up To Date:

All Posts RSS feed.

Articles RSS feed.

Journal RSS feed.

Notes RSS feed.