Текст отображается неправильно в Safari (5.0.5) - PullRequest
3 голосов
/ 30 сентября 2011

Мне трудно решить эту проблему.

Я работаю над http://movingwineforward.com,, но он отображает текст непоследовательно, как вы можете видеть на этом скриншоте:

ошибка http://f.cl.ly/items/1t2u0p0B1d2a3a0S452B/laksdf.png

Когда страница загружается, текст в главном меню выглядит тонким (слева) и соответствует любой другой ОС и браузеру. Но при нажатии он становится немного тяжелее, как на правой стороне скриншота.

Я проверил каждое свойство CSS, как в таблице стилей, так и в Safaris (и Chrome) DOM Inspector, и они оба идентичны.

Когда я отключаю скрипты в Safari, текст загружается как более тяжелая версия (справа), поэтому я предполагаю, что это мешает. (Я загружаю некоторые флеш-плееры Vimeo, среди других скриптов).

Для добавленной тайны, этот сайт является копией http://daf.cl,, и они оба имеют одинаковую таблицу стилей, DOM (разметку), файлы шрифтов и Javascript. Меняются только цвета и контент. Но в http://daf.cl текст загружается первоначально в более тяжелой версии и остается таким.

Мне удалось воспроизвести это поведение на Safari 505 , работающем в OSX Leopard .

По запросу клиентов текст должен выглядеть так же, как справа (тяжелее). Я пытался заставить -webkit-font-smoothing и text-render в CSS, но ни один из них не сработал. Вес шрифта не выглядит хорошо, так как он заставляет гарнитуру.

Обновление 1:

Теперь я знаю, когда это происходит: только когда за меню находится флеш-плеер Vimeo, текст становится тоньше. Если позади видео нет, оно выглядит тяжелее (как и должно быть). Возможно, это приносит новый свет. (Я пытался отключить jQuery Froogaloop для Moogaloop, но не сработало)

Ответы [ 2 ]

2 голосов
/ 07 сентября 2012

Сначала сделайте это:

opacity: .99;

Применение этого к объекту, содержащему ваш текст, будет инициализировать его более светлым. Так что это не решит проблему вашим предпочтительным способом (придерживайтесь «обычной» толщины), но вместо этого предотвратит последующее «отскок» к более светлому варианту.

Теперь давайте немного поработаем:

text-shadow: 0 0 1px rgba(255, 255, 255, 0.75);

Кроме того, применение тонкой тени текста в том же цвете, что и шрифт, приведет к тому, что текст будет выглядеть почти точно так, как вы хотите.

0 голосов
/ 02 октября 2011

Хотя это не настоящее решение, вы можете попробовать добавить что-то вроде

text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);

к тексту.

...