Css sticky element is flickering

I use in my css sticky element. But it is flickering. What can I do to fix this?

.sticky {
position: -webkit-sticky !important;
position: sticky !important;
top: 20px;;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-scroll-touch:rgba(0,0,0,0);
-webkit-transform: translate3d(0, 0, 0);

}

Try one (or all) of the following:

  • add some high z-index to it CSS rule
  • add transform: translate3d(0,0,0) CSS rule
  • add transform-style: preserver-3d CSS rule
  • add backface-visibility: hidden CSS rule
2 Likes

Thank you for your anser. I try but nothing helps. It seems when you scroll and I hold my hands off from the phone it will flicker, untill scrolls stop the div will appear again. Is there a workaround for this?

.sticky {
position: sticky;
position: -webkit-sticky;
position: -moz-sticky;
position: -o-sticky;
position: -ms-sticky;
top: 20px;
z-index: 9999999;
transform-style: preserver-3d;
backface-visibility: hidden;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
transform: translate3d(0,0,0);
transform: translateZ(0);
-webkit-transform: translateZ(0);
}

It was because I didnt use wkwebview. Now I use wkwebview and everything works fine

Install cordova-plugin-ionic-webview and not cordova-plugin-wkwebview-engine.

And everything works fine! Again Big Thanks. Aweseome!

Thank you! I had a similar issue and that just solved it with the transform: translate3d(0,0,0) CSS rule, also Iā€™m a big fan of SwiperJS!!