I’m pulling my hair out on this one. I’m using the FlexSlider on a page with great results; however when running this, Safari (Mac version, not ios) renders the fonts on the page thinner. Firefox and Chrome both have no issues. Here is my basic code in case that helps at all:
<html>
<head>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/flexslider.css" />
<title>Title</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/flexslide.js"></script>
</head>
<body>
<div id="header"><span class="slogan">Slogan At The Top</span></div>
<h1>View These Slides</h1>
<div class="gallery">
<div class="flexslider-container">
<div class="flexslider">
<ul class="slides">
<li><div class="slider">Element 1</div></li>
<li><div class="slider">Element 2</div></li>
</ul>
</div>
</div>
</div>
</body>
</html>
I actually assume that the code in this case won’t help. I feel like it’s more of an issue with Safari and something in FlexSlider. I thought I had narrowed the problem down to FlexSlider’s use of translate3d but it didn’t pan out.
Has anyone else experienced Safari changing the thickness of fonts based on jQuery elements or even something like a flash video (not used in this case)? Also, I’m not using any embedded fonts, fyi.
Sharing this as it solved the issue for me… I simply added the following into my CSS file
This is an inverse fix, in that it changes the rest of the text on your page to appear as it does in the slider. Doing it the other way round will require you modifying the flexslider javascript code.
Got this from here: https://github.com/desandro/isotope/issues/209#issuecomment-7377938