移动设备上的 Typed.js 故障

Question

I'm using Typed.js and there is a glitch when viewed on Safari on some mobile phones. It looks fine on my phone (iPhone SE), but my client sees this on her iPhone 6:

https://drive.google.com/open?id=1RrPRB1LfrqidOo6b9cTUhHq6Mv7LKLWJ

It is difficult to figure out what is causing the issue since I don't see anything wrong on my end. I am using the Typed.js CDN and here is my code:

<div class="typed_wrap">
  <p><span class="typed"></span></p>
</div>

<script>
  $( document ).ready(function() {
    $(function(){
        $(".typed").typed({
            strings: ["Is it possible to scale my marketing with podcasts?", "What types of podcasts best reach my target audience?", "How should I craft my message for podcast host reads?", "How do I know where to place my ads within the podcast content for maximum effectiveness?", "How do I get an experienced marketing team to manage and optimize my campaign?"],
            stringsElement: null,
            typeSpeed: 5,
            startDelay: 1000,
            backSpeed: 1,
            backDelay: 2000,
            loop: true,
            showCursor: false,
            cursorChar: "|",
            attr: null,
            contentType: 'html',
            callback: function() {},
            preStringTyped: function() {},
            onStringTyped: function() {},
            resetCallback: function() {}
        });
    });
  });

</script>

Am I initializing it wrong? I have tried Googling it and I cannot find anyone else who has had this specific problem. Thanks in advance!

Answer 1

This is related to animation behavior in Webkit, I guess.

Try to add the following class to the parent block element of span#typed :

.stop-flicking-around {
  -webkit-transform:translate3d(0,0,0);
}

Source: iPhone WebKit CSS animations cause flicker