Плывет вёрстка хедера на ширине экрана 735px

[anton-horbachov]

При ширине экрана 735px ломается верстка хедера: проблема с media queries max-width: 735px & min-width: 736px

[pepelsbey]

Хм, а у меня всё нормально: 734, 735, 736 — ничего не ломается.

Chrome

Firefox

[anton-horbachov]

Проверил в macOS: Chrome & Safari - без проблем все отрисовали.

Судя по всему, это поведние присуще только Windows платформе (win10, x64, v10.0.19041). Проверил на:

• Chrome(v91.0.4472.124)
• Firefox(v89.0.2)
• Edge(v91.0.864.64)

это поведение воспроизводится.

[alexeyten]

А в винде системный зум не включен случаем? А то как-то шрифт явно крупнее чем у меня.

[anton-horbachov]

@alexeyten Вы оказались правы - это мой фейл ( У меня по дефолту был 125% зум. Установка в 100% решила эту проблему.

[alexeyten]

Ну я не уверен что это можно назвать твоим косяком. Насколько я знаю, зум 125% в винде довольно распространён. Ну и не должна вёрстка ломаться от таких внешних причин.

[pepelsbey]

Это точно не фейл, это удивительная ситуация. Есть идеи, как исправить?

[anton-horbachov]

До момента, когда мы выяснили, что это связанно со скейлингом, я пытался решить это редактированием СSS, но к сожалению не преуспел в этом. На данный момент идей нет - нужно поинвестигейтить. Как что-то найду - обязательно дам знать.

[jycope]

При скейле 100% ошибка есть

[TakNePoidet]

Если писать везде медиа 735 Правда так не могу проверить при 100%

[anton-horbachov]

Похоже, вот здесь описана подобная проблема с примером

Если вкратце, то как я понял - скейлинг (браузерный или системный) приводит к тому, что значение ширины экрана становится/вычисляется дробным и не округляется. Вот и получается, что 991 < 991.2 < 992 Ну а решения пока не нашёл...

[monochromer]

А можете ради эксперимента задать брейкпойнты в em (736/16 = 46em). Будет ли тоже самое?

[TakNePoidet]

Вроде исправил проблему с шапкой. Даже на 133% нормально выглядит. Если все хорошо, могу отправить пулреквест https://github.com/TakNePoidet/web-standards.ru

[pepelsbey]

@TakNePoidet как именно исправили? Сложно искать :) Ну или давайте сразу ПР.

[TakNePoidet]

Заменил @media (max-width: 735px) на @media (min-width: 736px).