How to get rid of text animation flash on mobile

Question

I'm building a marquee following this codepen: https://codepen.io/fcalderan/pen/GRJeYOL

It works fine on desktop but on mobile the text flashes (might have to zoom in to see). It happens on all mobile browsers too so not a browser problem. How can I get rid of the flash? I've tried a lot of recommended solutions like:

transform: translate3d(0);
backface-visibility: hidden;
perspective: 1000;

and I tried it on both the span and the outer divs but it doesn't seem to fix it. I'm not sure if this problem is due to using the text-shadow to duplicate the text to create the marquee effect, or if the text width is too large compared to the mobile screen size but this solution is the one that fits my needs the best so would like to keep it.

How can I get rid of the flash?! SOS its taking too much brainpower it hurts

Answer 1

I believe it will work.

 @media only screen and (max-width : 768px) {
    .animated {
        /*CSS transitions*/
        -o-transition-property: none !important;
        -moz-transition-property: none !important;
        -ms-transition-property: none !important;
        -webkit-transition-property: none !important;
        transition-property: none !important;
        /*CSS transforms*/
        -o-transform: none !important;
        -moz-transform: none !important;
        -ms-transform: none !important;
        -webkit-transform: none !important;
        transform: none !important;
        /*CSS animations*/
        -webkit-animation: none !important;
        -moz-animation: none !important;
        -o-animation: none !important;
        -ms-animation: none !important;
        animation: none !important;
    }
}