OS X 上的 Safari 出现奇怪的文本渲染问题答案

【问题标题】：Strange text rendering issue with Safari on OS XOS X 上的 Safari 出现奇怪的文本渲染问题
【发布时间】：2016-10-20 12:20:27
【问题描述】：

我在 OS X 上使用 Safari 时遇到了一个非常奇怪的问题，我有一个用 VueJS 编写的日历系统，上一个和下一个按钮显示它们将导航到的月份，如下所示：

点击下个月或上个月后，会发生以下情况：

如您所见，之前的文本似乎保留并覆盖在当前文本之上。此文本是从 VueJS 变量更新的：

<a class="filter-next-month" v-on:click.stop="nextMonth()" v-if="nextMonthIndex !== false">
    <span>[[ months[nextMonthIndex].time ]]</span>
    <i class="next_arrow"></i>
</a>

除了颜色之外，CSS 中没有任何东西会影响文本、呈现方式等。

这已经在 OS X El Capitan (10.11.2) 和我们的客户在 OS X Sierra 的最新稳定版本上进行了测试。从我发现的任何其他浏览器中也不会发生这种情况。

是否有针对此问题的已知解决方案？

【问题讨论】：

你能提供一个可重现的 jsfiddle 吗？有时可以通过向元素添加多余的transform: translateZ(0) 来解决渲染问题。

标签： javascript css safari vue.js

【解决方案1】：

似乎我个人能找到的解决此问题的最佳方法是设置以下内容：

display: inline-block;
min-width: 0%;

使用transform: translateZ(0) 似乎也无法解决此问题。

【讨论】：