Div, который выглядит по-разному в каждом браузере?

Question

[Марина]

Как это работает вообще?
Что за колдунство, объясните, пожалуйста.

https://codepen.io/MartijnCuppens/pen/MXojmw

Answer 1

[itsjustmypage]

Outline это контур элемента с внешней его стороны, то есть сразу за border. В отличие от border он никак не влияет на элементы, их ширину и расположение. Ключевое слово inset в свойстве outline: inset 100px green; устанавливает этот контур в виде псевдотрехмерной рамки за счёт осветления правой и нижней границ и затемнения левой и верхней относительно указанного цвета. Ширина 100px, цвет зелёный.

Баг создаёт свойство outline-offset: -125px;, которое задаёт смещение контура. При положительном значении контур будет расширяться во все стороны. А при отрицательном будет сжиматься внутрь элемента.

Спецификация CSS Basic User Interface Module Level 3 в статусе рекомендации говорит о том, что контур элемента со свойством outline-offset при отрицательном значении не должен становиться меньше, чем двукратная вычисляемая ширина контура. То есть если в примере у нас размеры элемента 100x100 пикселей и контур задан у нас шириной 100px, то при outline-offset: -125px; он должен сжаться внутрь элемента на 125px со всех сторон, а спецификация визуально ограничивает сжатие до outline-offset: -50px; (по 50px внутрь с каждой стороны элемента). То есть контур должен просто сойтись вместе со всех сторон, образуя квадрат в нашем случае и насколько больше не ставь отрицательное значение, больше он сжиматься не должен. Но реализация в браузерах не учитывает это поведение и выдаёт непонятные фигуры, если отрицательное значение слишком большое.

https://www.w3.org/TR/css-ui-3/#outline-offset


Поведение при отрицательном outline-offset должно быть как на гифке. Если дальше уменьшать значение, ничего меняться не должно.

Comments

[Rsa97]

Добавлю. При чтении такой документации стоит обращать внимание на то, какими именно словами описаны требования (RFC 2119). В данном случае при отрицательном значении контур должен (MUST) сжиматься внутрь элемента, а вот все остальные требования браузерам только рекомендуется (SHOULD) выполнять.

Answer 2

[Кирилл]

Весь фокус в том, что разные браузеры по-разному обрабатывают свойство outline-offset, особенно отрицательный в вёбките и его потомках оно чудесно ломается

Answer 3

[Максим Тимофеев]

уменьшите значения outline и outline-offset и увидите что никакого колдунства нет, например

outline: inset 2px green;
  outline-offset: -2px;