Question

我正在把头发拉出来。我在一个页面上使用FlexSlider，效果很好;但是在运行时，Safari（Mac版本，而不是ios）会使页面上的字体变薄。 Firefox和Chrome都没有问题。这是我的基本代码，以防万一：

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

我实际上认为这种情况下的代码无济于事。我觉得这更像Safari的问题和FlexSlider中的一些问题。我认为我已经将问题缩小到FlexSlider使用translate3d，但它并没有成功。

有没有其他人经历过Safari改变基于jQuery元素的字体厚度，甚至是像flash视频（在这种情况下不使用）？另外，我没有使用任何嵌入字体，fyi。

Answer 1

分享这个，因为它解决了我的问题......我只是将以下内容添加到我的CSS文件中

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

这是一个反向修复，因为它会更改页面上其余文本，使其显示为滑块中的文本。反过来这样做需要你修改flexslider javascript代码。

从这里得到这个：https://github.com/desandro/isotope/issues/209#issuecomment-7377938

Answer 2

这只是一个CSS修复。以下内容可防止webkit中的文本细化（safari / chrome）：

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

如果您的控制导航器没有位于滑块上方的绝对位置，那么应该是全部，如果您的控制导航器位于上方，就像我的一样，那么我就这样做了：

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

隐藏的溢出已添加到.flex-control-nav，因为在我的Macbook中，在Firefox和Chrome中的某些布局中，两个手指不会刷页面，而是移动页面本身至少导致移动至少100％或者更多。

Answer 3

我不认为@Will Schmidt的回答是正确的。

我在样式表上发现了读取

的行

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

应该是

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

这对我有用，而他的答案却没有（就像他开始时一样，它会影响所有文字）。

Answer 4

我也在努力解决这个问题。在我的情况下，字体似乎褪色。看了这个和其他讨论后，我通过在Flexslider中禁用webkit转换来修复它。我相信这可能会删除Safari浏览器的硬件加速，但至少它有效。我正在使用Flexslider 1.8版。

在Flexslider javascript文件（未缩小）中，查找顶部附近的以下代码：

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

将第二行更改为：

slider.transitions = false;

我希望这适合你。（我也愿意接受更好的解决方案： - ）

Answer 5

添加：

position: relative; z-index: 1;

到线：

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

为我修好了：

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

使用页面上的jQuery滑块，Safari渲染页面字体更薄

5 个答案: