Issue
On a little frontend I developed in Vue ^3.0.0 for an API, I ran across the issue where after I deployed it I started getting complaints from people saying the site doesn’t work on mobile. I knew it had to be safari so I loaded it up on an iPad I had lying around and yep, It absolutely decimated the site. This is the site. I have tested this on an iOS12.5.5 device and the problem also occurs on an iOS15.1 device.
CSS properties like:
width: clamp(325px, 30vmax, 575px);
height: clamp(40px, 3vmax, 57.5px);
Will give an invalid property value warning (and not work at all) unless I change them to:
min-width: 325px;
width: 30vmax;
max-width: 575px;
min-height: 40px;
height: 3vmax;
max-height: 57.5px;
Which I find ridiculous as every other browser I’ve tested works perfectly fine. The biggest problem being that I use these clamp functions on fonts as well, so they just break for good.
Also, you might notice that for example the placeholder text inside of the search bar isn’t centered at all on safari. I center this item absolutely as the font itself is off-center and it breaks only on safari as far as I know. This is the ccs I use to center it:
input {
position: relative
}
input::placeholder {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, calc(-50% + 2px));
}
This actually demotivates me a lot, I don’t understand why there’s a difference in the first place, why no-one else is complaining about this and this just makes me want to scrap safari support altogether.
EDIT:
Also just figured out this happens on chrome for iOS as well.
Solution
There’s no good solution to the clamp problem as far as I know but it can be addressed as follows:
iOS devices / the mobile browsers for iOS struggle with the clamp method, but there is a workaround / fallback which works in most cases. For me it didn’t entirely fix the problem because they aren’t identical in behaviour. But if you have a clamp function
clamp(a, b, c)
You can use the following as a workaround:
max(a, min(b, c))
So for a width and height value use something like this:
width: max(325px, min(30vmax, 575px));
width: clamp(325px, 30vmax, 575px);
height: max(40px, min(3vmax, 57.5px));
height: clamp(40px, 3vmax, 57.5px);
This also works for other properties likes fonts
The transform issue in input::placeholder elements was something I couldn’t fix so I scrapped it, even after trying to use:
-o-transform: translate(-50%, -50%);
Answered By – Keimpe Rauwerda
This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0