可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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.

回答1:

Sharing this as it solved the issue for me... I simply added the following into my CSS file

html { -webkit-font-smoothing: antialiased; }

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

回答2:

It's just a CSS fix. The following prevents the thinning of text in webkit (safari/chrome):

.flexslider {position:relative;z-index:1}

If your control nav is not positioned absolute above the slider, then that should be all, if yours is positioned above, like mine, then I did this:

.flex-control-nav {position: absolute; top: 0;left:0;overflow:hidden;z-index: 2;}

The overflow hidden was added on the .flex-control-nav because in certain layouts in firefox and chrome, on my Macbook, two fingers would not swipe the page, but move the page itself around causing shifting of at least 100% wide or more.

回答3:

I don't think @Will Schmidt's answer is correct.

I found that on the stylesheet the line that reads

.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden; }

should be

.flexslider .slides > li {display: none; }

This worked for me, whereas his answer didn't (like he started, it effects all text).

回答4:

I've struggled with this too. In my case the fonts seemed to fade. Having looked at this and other discussions I fixed it by disabling the webkit transforms in Flexslider. I believe this may remove hardware acceleration for Safari browsers, but at least it worked. I'm using Flexslider version 1.8.

In the Flexslider javascript file (not minified), look for the following code near the top:

//Test for webbkit CSS3 Animations
slider.transitions = "webkitTransition" in document.body.style;

Change the second line to:

slider.transitions = false;

I hope this works it for you. (I'm also open to better solutions :-)

回答5:

Adding:

position: relative; z-index: 1;

To the line:

.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease; }

Fixed it for me:

.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease; position: relative; z-index: 1; }