Skip to content

Instantly share code, notes, and snippets.

@oscarotero
Last active September 4, 2023 09:52
Show Gist options
  • Save oscarotero/8ca10ea8475124c92922745a648d7954 to your computer and use it in GitHub Desktop.
Save oscarotero/8ca10ea8475124c92922745a648d7954 to your computer and use it in GitHub Desktop.
/**
* iPhone X notch: Remove the white bars in Safari
* It's needed to include the "viewport-fit=cover" directive in the html. For example:
* <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
*
* More info: http://stephenradford.me/removing-the-white-bars-in-safari-on-iphone-x/
*/
.wrapper {
background-color: red;
padding: env(safe-area-inset-top)
env(safe-area-inset-right)
env(safe-area-inset-bottom)
env(safe-area-inset-left);
}
/**
* Customize the scroll overflow effect
* Possible values are auto, contain and none
*
* More info: https://developers.google.com/web/updates/2017/11/overscroll-behavior
*/
body {
overscroll-behavior: contain;
}
/**
* Fixed blurred images on scale in chrome
*
* More info: https://medium.freecodecamp.org/-898b38a6c0e1
*/
img {
image-rendering: -webkit-optimize-contrast;
}
@anthony0030
Copy link

Thanks for sharing these optimizations
There is a typo in overscroll-behaviour it should be overscroll-behavior.

@oscarotero
Copy link
Author

thanks for letting me know.
Fixed!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment