Браузер уменьшает толщину border?

279

13 марта 2017, 08:41

Здравствуйте! У меня такая проблема: браузер Chrome отображает ширину border у html элементов не такую, как задана в стилях, а уменьшенную в 0.8 раз. Моё разрешение экрана на ноутбуке 1920 x 1080. (Windows 10). Но браузер Chrome (и не только он) масштабирует так, что моя ширина становится = 1536 пикселей. То есть тоже уменьшает в 0.8 раз. Но в IE11 и Edge бордер отображается как надо. Хотелось бы понять, как сделать одинаковое поведение во всех браузерах? Заранее спасибо :)

Answer 1

Этот баг Chrome, который встречается в самых разных версиях браузера. Отчего он возникает - точного мнения пока нет, скорее всего из-за особенностей субпиксельного рендеринга Webkit. Аналогичный баг имеется в Firefox, насчет Safari ничего не могу сказать (у меня Safari на Мас работал корректно).

Проблема имеет статус "Открыто" в баг-трекере.

Ниже примеры, где можно наглядно проверить ширину border в разных браузерах. http://jsfiddle.net/uzQJE/14/ и http://codepen.io/anon/pen/JqFgi (код идентичен). При этом в одном примере браузер может работать корректно, а в другом - нет.

Ctrl+ и Ctrl- (изменение масштаба просмотра) дают неожиданные результаты.

Chrome для PC имеет баг, на Chrome для Mac OS результаты Chrome были корректны.

Что делать с этим - неизвестно. Судя по тому, что обсуждать эту проблему начали как минимум пять лет назад - вряд ли стоит ожидать ее быстрого решения :) На самом деле ее видели "почти все" - просто она обычно незаметна невооруженным глазом.