OS X 上 Safari 的奇怪文本呈现问题

Question

我运行在 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 的最新稳定版本上进行了测试。在我发现的任何其他浏览器中也不会发生这种情况。

这个问题是否有已知的修复方法？

Answer 1

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

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

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

OS X 上 Safari 的奇怪文本呈现问题

Strange text rendering issue with Safari on OS X

javascript

css

safari

vue.js