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 …

  • <!DOCTYPE html> <html> <head> <title></title> </head> <body> <p><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 …</p> </body> </html>
  • Murray Adcock.
Journal permalink