Странная проблема с отображением текста в Safari на OS X

#javascript #css #safari #vue.js

#javascript #css #safari #vue.js

Вопрос:

Я столкнулся с довольно странной проблемой при использовании Safari в OS X, у меня есть календарная система, написанная на 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. Это также не происходит ни в одном другом браузере из того, что я нашел.

Есть ли известное исправление этой проблемы вообще?

Комментарии:

1. Не могли бы вы предоставить воспроизводимый jsfiddle? Иногда проблемы с отображением могут быть исправлены путем добавления лишнего transform: translateZ(0) к элементу.

Ответ №1:

Кажется, что лучшее исправление, которое я мог лично найти для этой проблемы, — это установка следующего:

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

Использование transform: translateZ(0) , похоже, также не помогло с этой проблемой.