Что делать при обнаружении смещения кнопки при сравнении макета с реальным экраном
Что проверяют
Отличаете ли вы дефект вёрстки от нормального поведения адаптивного интерфейса и умеете ли описать расхождение числами, а не ощущением, что кнопка съехала. Проверяют и приоритизацию: одно и то же смещение бывает косметикой, а бывает блокером.
Как отвечать
Сначала убедиться, что сравнение корректно. Макет нарисован для конкретной ширины и плотности пикселей, поэтому проверять надо на том же разрешении, при масштабе страницы 100% и системном размере шрифта по умолчанию. Стоит убедиться и в том, что макет актуален: расхождение часто означает, что дизайн обновили, а вы смотрите старую версию.
Дальше измерить, а не оценить на глаз. В инспекторе видны реальные отступы, размеры и выравнивание: padding, margin, gap, ширина контейнера. Полезно понять, системное ли это расхождение: если весь блок сдвинут одинаково, дело в общем отступе или в неверной контрольной точке адаптива, а не в кнопке.
Отдельно проверяется то, что важнее пикселей:
- не перекрывает ли кнопка другой элемент и не уезжает ли за границу экрана;
- совпадает ли область нажатия с видимой кнопкой;
- держится ли вёрстка при длинном тексте, другом языке интерфейса и увеличенном системном шрифте.
В дефект идут скриншот с наложением на макет, числовые значения, устройство, разрешение, браузер или версия ОС, ссылка на нужный экран макета. Приоритет по влиянию: сдвиг на пару пикселей низкий, недоступная или перекрытая кнопка высокий.
Где спотыкаются
Сравнивают скриншот экрана высокой плотности с макетом в логических пикселях и получают двукратную разницу везде. Это не дефект интерфейса, а ошибка метода сравнения.
Второе: заводят каждое расхождение отдельной задачей. Если по всему экрану разъехалась сетка, это один дефект про сетку, а десяток задач про отдельные элементы мешает разработчику увидеть общую причину.
Третье: ограничиваются картинкой и не проверяют поведение. Смещение бывает симптомом того, что элемент вынесен из своего контейнера, и тогда ломаются нажатие, прокрутка или фокус, а в задаче написано только про внешний вид.