CSS фоновое вложение и шрифт - PullRequest
5 голосов
/ 13 ноября 2011

У меня действительно странная проблема с моим прошлым. Когда я изменяю background-attachment на fixed в css, шрифт в моем меню становится меньше по какой-то причине, которую я не могу понять. Когда я изменил его на прокрутку или локальный, он возвращается к предполагаемому размеру. Есть ли причины, по которым это происходит?

Редактировать

Предоставление примера для OP:

Проблема возникает для меня только в Safari (с Chrome все в порядке) и только на некоторых компьютерах (воспроизводится на MacBook Pro 15 "с дисплеями без Retina, но не на iMac и дисплеях Retina). OSX: 10.8.5, 10.9.1 Версии Safari: 6.1.1, 7.0.1.

К сожалению, я не могу воспроизвести эту проблему с помощью jsfiddle, поскольку она не возникает в пределах iframes (однако содержимое iframe реагирует на это, что настоятельно рекомендует ошибку браузера IMHO).

Вместо этого вот пример HTML, который вы можете посмотреть локально:

<html>
    <body style="background-image: url(http://static4.depositphotos.com/1000419/321/v/950/depositphotos_3210195-Art-tree-beautiful-black-silhouette.jpg); background-attachment: fixed;">
    <p style="font-family: Arial; font-size: 30px;">some fun text</p>
    </body>
</html>

Выберите тег body в инспекторе и переключите правило background-attachment. Что вы увидите, так это то, что шрифт немного меняется (тоньше / смелее).

Я бы хотел выяснить, насколько это проблема и какие машины затронуты, так что проблема может в конечном итоге достичь какой-то бедной Apple dev ...:)

Обновление

Забавный факт: -webkit-transform: translateZ(0); можно использовать в качестве обходного пути. Почему это работает, я не знаю ...

Ответы [ 3 ]

2 голосов
/ 14 августа 2014

У меня была похожая проблема с Safari, и это определенно решило ее:

-webkit-font-smoothing: subpixel-antialiased;

, тогда как -webkit-transform: translateZ(0); не всегда было полезно.

0 голосов
/ 19 февраля 2014

Вы можете попробовать любой из них:

-webkit-font-smoothing: antialiased;

-webkit-transform:translateZ(0);

-webkit-transform: scale(1);

-webkit-transform:rotate(360deg);

Сглаживание шрифтов несколько раз помогало мне, когда в Safari возникали странные проблемы со шрифтами.

0 голосов
/ 13 февраля 2014

Использование хака translateZ(0) включает аппаратное ускорение, которое оказывает некоторое влияние на рендеринг изображения и перерисовку пользовательского интерфейса в целом.

Имейте в виду, что оно также может иметь влияние на производительность

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...