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.
My page is at: http://joshrodg.com/hallmark/ (the blue section is towards the bottom) - has anyone else seen this?
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.