Question

我正在使用Typed.js，并且在某些手机上的Safari上查看时出现故障。它在我的手机上看起来很好（iPhone SE），但我的客户在她的iPhone 6上看到了这个：

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

很难弄清楚导致问题的原因，因为我没有看到任何错误。我使用的是Typed.js CDN，这是我的代码：

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

我初始化错了吗？我试过谷歌搜索它，我找不到任何有这个特定问题的人。提前谢谢！

Answer 1

我想这与Webkit中的动画行为有关。

尝试将以下类添加到span#typed的父块元素中：

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

来源：iPhone WebKit CSS animations cause flicker

Typed.js在手机上出现故障

1 个答案: