JohnHoulderUK JohnHoulderUK - 29 days ago 4
CSS Question

Strange text rendering issue with Safari on OS X

I'm running into quite a strange issue while using Safari on OS X, I have a calendar system written in VueJS, the previous and next buttons show the months that they will navigate to as shown here:
Before changing month

After clicking on the next or previous month, this happens:
After changing month

As you can see, the previous text seems to remain and be overlayed on top of the current text. This text is updated from a VueJS variable:

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


There is nothing in the CSS affecting the text, how it renders, etc. other than color.

This has been tested on OS X El Capitan (10.11.2) and by our client on the latest stable version of OS X Sierra. It also doesn't happen in any other browser from what I've found.

Is there a known fix for this issue at all?

Answer

It seems that the best fix I could personally find for this issue is setting the following:

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

Using transform: translateZ(0) didn't seem to work for this issue, either.