Skip to content

Instantly share code, notes, and snippets.

@willwright82
Created March 7, 2019 14:20
Show Gist options
  • Save willwright82/19aaf74d28619f7a2ed3b6ab5dc4c99c to your computer and use it in GitHub Desktop.
Save willwright82/19aaf74d28619f7a2ed3b6ab5dc4c99c to your computer and use it in GitHub Desktop.
To fix Safari flickering force GPU acceleration by adding transform translate3d(0,0,0) to your element (via https://muffinman.io/ios-safari-scroll-position-fixed/)
/*
If you ever had to fix element on scroll,
you probably had an issue on iOS Safari
(and other mobile devices). Element will
usually flicker, and disappear until scrolling
has stopped completely.
Just force GPU acceleration by adding transform:
translate3d(0,0,0); to your element.
*/
.Element-header {
transform: translate3d(0,0,0);
}
.Element-header--fixed {
top: 0;
position: fixed;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment