Блог

В небольшом интерфейсе, который я разработал в Vue ^ 3.0.0 для API, я столкнулся с проблемой, когда после его развертывания я начал получать жалобы от людей, говорящих, что сайт не работает на мобильных устройствах. Я знал, что это должен быть safari, поэтому я загрузил его на iPad, который у меня лежал, и да, он полностью уничтожил сайт. Это сайт. Я протестировал это на устройстве iOS12.5.5, и проблема также возникает на устройстве iOS15.1.

Свойства CSS, такие как:

 width: clamp(325px, 30vmax, 575px);
height: clamp(40px, 3vmax, 57.5px);
 

Выдаст предупреждение о недопустимом значении свойства (и не будет работать вообще), если я не изменю их на:

 min-width: 325px;
width: 30vmax;
max-width: 575px;
min-height: 40px;
height: 3vmax;
max-height: 57.5px;
 

Что я нахожу смешным, поскольку любой другой браузер, который я тестировал, работает отлично. Самая большая проблема в том, что я использую эти функции зажима и для шрифтов, поэтому они просто ломаются навсегда.

Кроме того, вы можете заметить, что, например, текст-заполнитель внутри строки поиска вообще не центрируется в Safari. Я полностью центрирую этот элемент, поскольку сам шрифт смещен от центра, и, насколько я знаю, он ломается только в Safari. Это ccs, который я использую для его центрирования:

 input {
  position: relative
}

input::placeholder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50%   2px));
}
 

На самом деле это меня сильно демотивирует, я вообще не понимаю, почему есть разница, почему никто больше не жалуется на это, и это просто заставляет меня полностью отказаться от поддержки Safari.

Редактировать:

Также только что выяснил, что это происходит и в Chrome для iOS.

Насколько я знаю, нет хорошего решения проблемы с зажимом, но ее можно решить следующим образом:

Устройства iOS / мобильные браузеры для iOS борются с методом clamp, но есть обходной путь / запасной вариант, который работает в большинстве случаев. Для меня это не полностью решило проблему, потому что они не идентичны по поведению. Но если у вас есть функция зажима

 clamp(a, b, c)
 

Вы можете использовать следующее в качестве обходного пути:

 max(a, min(b, c))
 

Итак, для значения ширины и высоты используйте что-то вроде этого:

 width: max(325px, min(30vmax, 575px));
width: clamp(325px, 30vmax, 575px);
height: max(40px, min(3vmax, 57.5px));
height: clamp(40px, 3vmax, 57.5px);
 

Это также работает для других свойств, таких как шрифты

Проблема с преобразованием в элементах ввода :: placeholder была чем-то, что я не мог исправить, поэтому я отказался от нее, даже после попытки использовать:

 -o-transform: translate(-50%, -50%);