Safari рендеринг шрифтов страницы тоньше с помощью ползунка jQuery на странице

Я вытаскиваю свои волосы на этом. Я использую 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 ответов

Решение

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

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

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

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

Источник

Это просто исправление 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% или более.

Источник

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

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

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

должно быть

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

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

Источник

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

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

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

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

slider.transitions = false;

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

Источник

Добавление:

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; }
Источник
Другие вопросы по тегам