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!!