С Safari у меня чаще всего всплывают не «сломанные стили», а мелочи, которые трудно поймать без проверки на реальном устройстве: высота блока прыгает при появлении адресной строки, кнопка выглядит иначе, чем в остальных браузерах, или элемент с position: sticky внезапно перестаёт липнуть. Особенно обидно, когда в эмуляторе всё выглядит нормально, а на iPhone уже другая история.
Сейчас стараюсь проверять не только актуальный Safari на Mac, но и мобильную версию, а спорные места сводить к маленькому примеру. Для высоты экрана смотрю в сторону единиц svh/dvh и проверяю поведение при прокрутке; для форм явно задаю стили полей и кнопок, не полагаясь на системное оформление. Если проблема с липким элементом, проверяю родителей: overflow и transform иногда оказываются важнее самого sticky.
А какой баг Safari у вас отнимает больше всего времени? Интересно, что помогает именно в практике: тесты на устройствах, BrowserStack-подобные сервисы, отдельные CSS-правки или отказ от хрупкого решения? И есть ли симптомы, которые вы теперь проверяете сразу, ещё до того, как заказчик пришлёт скриншот «у меня всё съехало»?
Сейчас стараюсь проверять не только актуальный Safari на Mac, но и мобильную версию, а спорные места сводить к маленькому примеру. Для высоты экрана смотрю в сторону единиц svh/dvh и проверяю поведение при прокрутке; для форм явно задаю стили полей и кнопок, не полагаясь на системное оформление. Если проблема с липким элементом, проверяю родителей: overflow и transform иногда оказываются важнее самого sticky.
А какой баг Safari у вас отнимает больше всего времени? Интересно, что помогает именно в практике: тесты на устройствах, BrowserStack-подобные сервисы, отдельные CSS-правки или отказ от хрупкого решения? И есть ли симптомы, которые вы теперь проверяете сразу, ещё до того, как заказчик пришлёт скриншот «у меня всё съехало»?
Комментарии 9
Обсуждение темы — по порядку