Safari рендеринг шрифтов страницы тоньше с помощью ползунка jQuery на странице - PullRequest
1 голос
/ 29 января 2012

Я вытаскиваю свои волосы на этом.Я использую 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 или даже что-то вроде флэш-видео (неиспользуется в этом случае)?Кроме того, я не использую встроенные шрифты, к вашему сведению.

Ответы [ 5 ]

15 голосов
/ 13 августа 2012

Обмен этим, поскольку это решило проблему для меня ... Я просто добавил следующее в свой файл CSS

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

Это обратное исправление, так как оно изменяет остальную часть текста на вашей странице так, как это делается на слайдере. Чтобы сделать это наоборот, вам потребуется изменить код JavaScript flexslider.

Получил это отсюда: https://github.com/desandro/isotope/issues/209#issuecomment-7377938

6 голосов
/ 19 июня 2012

Это просто исправление 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, потому что в некоторых макетах в Firefox и Chrome, на моем MacBook, два пальца не будут перелистывать страницу, но переместить страницусамо вокруг вызывает смещение шириной не менее 100% или более.

2 голосов
/ 07 мая 2013

Я не думаю, что ответ @Will Schmidt правильный.

Я обнаружил, что в таблице стилей строка, которая гласит

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

должна быть

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

Это сработало для меня, тогда как его ответ не (как онначало, это влияет на весь текст).

1 голос
/ 21 февраля 2012

Я тоже с этим боролся. В моем случае шрифты, казалось, исчезли. Посмотрев на это и другие обсуждения, я исправил это, отключив преобразования webkit в Flexslider. Я считаю, что это может устранить аппаратное ускорение для браузеров Safari, но по крайней мере это сработало Я использую Flexslider версии 1.8.

В файле JavaScript Flexslider (не минимизирован) найдите следующий код вверху:

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

Изменить вторую строку на:

slider.transitions = false;

Я надеюсь, это сработает для вас. (Я также открыт для лучших решений: -)

0 голосов
/ 16 января 2014

Добавление:

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; }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...