Сегодня 24 февраля, понедельник

Какой рейтинг вас больше интересует?

получить код

Главная / Каталог блогов / Cтраница блогера Хабрахабр: Web-разработка / Блог / Захабренные / Запись в блоге

	Хабрахабр: Web-разработка / Блог / Захабренные Голосов: 1 Адрес блога: http://habrahabr.ru/blog/webdev/ Добавлен: 2008-06-12 19:52:21 блограйдером ZaiSL

Font boosting в мобильных браузерах

2014-03-04 15:00:26 (читать в оригинале)

Я хочу рассказать о том, что такое font boosting в мобильных браузерах, к какой неожиданной проблеме он может привести при web-разработке и как с этой проблемой бороться.

Рассмотрим пример из реальной жизни:

Пример 1:

Имеется вновь созданный элемент с display: inline-block.

Измерим его ширину через свойство offsetWidth.

Поменяем его цвет.

И, вдруг, в Google Chrome for Mobile, после изменения цвета ширина элемента резко увеличивается, переставая соответствовать той, что была измерена всего двумя строчками выше!
Показать код
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv = "content-type" content = "text/html; charset=utf-8" />
    <title>Проблема с Font boosting в Google Chrome for Mobile</title>
    <script type = "text/javascript">
      window.onload = function ()
        {
        var spnSpan1 = document.getElementById ("span-1");
        
        alert ("Ширина элемента до изменения цвета: "+ spnSpan1.offsetWidth +"px"); //59px
        spnSpan1.style.color = "red";
        alert ("Ширина элемента после изменения цвета: "+ spnSpan1.offsetWidth +"px"); //186px (WTF?!)
        }
    </script>
  </head>
  <body>
    <p>
      <span id = "span-1" style = "display: inline-block;">Элемент</span> 
    </p>

    
    <p>
      abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
      abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
      abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
      abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
    </p>
  </body>
</html>
Смотреть пример on-line.

_{(Для просмотра примеров из этой статьи воспользуйтесь Google Chrome for Mobile или обычным Google Chrome в режиме эмуляции смартфона, например Apple iPhone 5 или Samsung Galaxy Note II).}

Почему же изменение цвета элемента приводит к увеличению его размера?! Причиной этого странного поведения, как раз, и является font boosting. Что же это такое?

Тэги: boosting, chrome, developement, font, google, inline-block, javascript, mobile, reflow, веб, веб-разработка, мобильный

Блограйдеров
14506

Блогов
219941
(+0 сегодня)

Сообществ
1311
(+0 сегодня)

Рыбалка
по среднему баллу (5.00) в категории «Спорт»

Категория «Обзоры»

Взлеты Топ 5


+248	328	Русский Фольклор
+241	284	Любер
+209	319	Литературное кафе "ИСКУССТВО"
+208	246	Kroshka_Strekoza
+194	215	x_lightcore_x

Падения Топ 5


-1	40	RichLife.ru
-1	63	Гламурная Я
-2	39	Водоочистка, водоподготовка. Самые низкие цены в Сибири!
-3	38	Строительство и Ремонт своими руками
-3	21	Sebastian_Valmont

Загрузка...

BlogRider.ru не имеет отношения к публикуемым в записях блогов материалам. Все записи
взяты из открытых общедоступных источников и являются собственностью их авторов.