Skip to content

Instantly share code, notes, and snippets.

@romaricpascal
Last active July 12, 2018 09:36
Show Gist options
  • Save romaricpascal/4f402e55a570f7af2194e42cecbeeff2 to your computer and use it in GitHub Desktop.
Save romaricpascal/4f402e55a570f7af2194e42cecbeeff2 to your computer and use it in GitHub Desktop.
Sass mixin so overlay scrolls instead of the content bellow on iOS
@mixin scrollable-overlay {
overflow: auto;
// iOS Specific tweaks
// See for hack explanation: http://browserbu.gs/css-hacks/webkit-full-page-media/
_::-webkit-full-page-media, & {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
// Forces overflow so -webkit-overflow-scrolling is picked up properly
// See http://patrickmuff.ch/blog/2014/10/01/how-we-fixed-the-webkit-overflow-scrolling-touch-bug-on-ios/#comment-172592
&::before {
content:””;
margin-left: -1px;
width: 1px;
float: left;
height: calc(100% + 1px);
}
&::after{
content:””;
width: 100%;
clear: both;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment