Блог

Я пытался найти все несоответствующие высоты прокрутки / смещения на странице, над которой я работаю, и наткнулся на это. Некоторые элементы имели разницу в 1 пиксель между scrollHeight / offsetHeight. Я смог сузить проблему до этого.

codepen

HTML:

 <div>Text</div>
  

css:

 div {
  font-size: 17px
  overflow: auto
}
  

Когда мы меняем размер шрифта, иногда появляется небольшая прокрутка в 1 пиксель. Кто-нибудь может объяснить, почему это происходит? У меня есть только одна строка в div. Почему он не растягивает высоту этого div должным образом? Могу ли я как-то избежать этого? Это очень раздражает.

Я пробовал только в Chrome и Firefox в Linux.

Похоже, это line-height проблема в сочетании с overflow: auto .

Вот копия вашего codepen. Единственное отличие заключается в том, что я установил значение по умолчанию line-height: 1 (если вы проверите div в своем codepen, вы увидите div , что оно наследует это line-height: 1 по умолчанию):

 div {
  font-size: 17px;
  overflow: auto;

  /* default line-height */
  line-height: 1;
}  

 <div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget interdum urna, eget tristique tellus. Phasellus pharetra blandit nisl, non venenatis arcu efficitur nec. Nulla facilisi. Ut at ante quis risus posuere varius. Aenean fringilla dui non sem hendrerit volutpat. Pellentesque mattis libero at volutpat malesuada. Aliquam in lobortis orci, vel condimentum tellus. Ut dignissim ligula sed nulla blandit vestibulum. Cras eleifend, orci eget rhoncus faucibus, massa lacus accumsan mauris, eget efficitur mauris est non nisl. Morbi vel nulla a urna pretium varius.
</div>  

Если вы установите подходящее line-height значение для вашего текста размером 17 пикселей, у вас не будет проблемы с прокруткой. Например:

 div {
  font-size: 17px;
  overflow: auto;
  line-height: 20px;
}  

 <div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget interdum urna, eget tristique tellus. Phasellus pharetra blandit nisl, non venenatis arcu efficitur nec. Nulla facilisi. Ut at ante quis risus posuere varius. Aenean fringilla dui non sem hendrerit volutpat. Pellentesque mattis libero at volutpat malesuada. Aliquam in lobortis orci, vel condimentum tellus. Ut dignissim ligula sed nulla blandit vestibulum. Cras eleifend, orci eget rhoncus faucibus, massa lacus accumsan mauris, eget efficitur mauris est non nisl. Morbi vel nulla a urna pretium varius.
</div>  

В принципе, если значение line-height меньше или равно значению font-size и overflow установлено auto равным, появляется проблема с прокруткой. Если overflow свойство удалено и line-height по-прежнему меньше или равно font-size , проблема с прокруткой исчезает.

Вот именно то, что overflow: auto делает, согласно MDN:

авто зависит от пользовательского агента. Если содержимое помещается внутри поля заполнения, оно выглядит так же, как и видимое, но все равно устанавливает новый контекст форматирования блока. Настольные браузеры предоставляют полосы прокрутки при переполнении содержимого.

По сути, с этим overflow набором свойств, когда вы line-height обрезаете шрифт, вы получаете полосу прокрутки.