Search code examples
javascriptcssfontssafaribxslider

Safari changing font weight on bxSlider

This seems to be only related to Safari, but when I have bxSlider active the font-weight changes...everything looks great in Chrome and Firefox. Is there something that I can add to my css that would fix this? The image on the left is the Safari issue...the image on the right is how it should look...I've tried The OSX-Only Fix, the -Webkit-Text-Shadow Hack, and the -Webkit-Text-Stroke Hack mentioned: https://blakepetersen.io/how-to-clean-up-chrome-and-safaris-webfont-rendering/. I don't think this is related to bxSlider specifically because the text looks fine in other browsers.

enter image description here

My page is at: http://joshrodg.com/hallmark/ (the blue section is towards the bottom) - has anyone else seen this?

Thanks,
Josh

Solution

  • So, for this issue, I couldn't find a resolution (aside from leaving things as-is).

    I saw one solution that mentioned the browser gets confused with the animations, so text gets rendered improperly. To fix this, you can add a relative position and z-index. The z-index should be higher than the z-index of the class with the animation. After looking, I wasn't able to figure out which class was performing the animation. I tried to add the z-index, but the text just didn't return back to normal.

    What I ended-up doing was exactly what I mentioned in the previous post...on .bx-viewport I added -webkit-text-stroke: 0.30px;. I like this solution because the webkit prefix primarily affects the Safari browser (where I'm seeing the issues).

    Because I haven't run across anything else that works, I'm going to use this as my solution.