I don't get Safari
I have 2 pages:
https://fluffy-pasca-93524f.netlify.app/plan-builder/
https://fluffy-pasca-93524f.netlify.app/home/
They both work great on the browsers and devices I tested it on EXCEPT Safari.
None of the properties I'm using should be unsupported; I just updated my Mac so I should have the latest version of Safari.
I have 2 problems:
On the
/plan-builder route, the hero image is humongous on my Macbook Air. It seems that unticking height: 100% from the background image removes that issue, but on every other device and browser it makes it so the background image doesn't take full height of the container (go figure).
The second issue I have is that the hero background image for the /home route does not show on Safari either. It shows up on every other browser.
I thought it was maybe the way I was declaring background: background: center / cover no-repeat url("..."); but I changed it to its invidual properties and that doesn't work either.3 Replies
Fixed problem 1. Had to throw a max-height of an arbitrary number on there to stop image from growing too big. I don't really like that solution. Probably would be better if I made it a background-image instead 🤷
Still need help on 2 for now though. Cleared cache and still nothing
Also another issue I have is that my link is being transitioned on page load, only on Safari, on the
/home route (the primary cta inside the hero -- "Shop now")
Damn it all I figured all this out.
Problem 2: I had a .avif image. Looked like it was supported in Safari on caniuse but apparently not? Maybe my safari is really out of date still somehow...
Link transition issue: I was transitioning all instead of just filter.I'm not 100% sure on this, but I think this is because of how Safari deals with
height: 100% on an image.
In Chrome and FF, the size is defined by that width. It takes the aspect ratio of the image, but even if you have height: 100%, it uses the aspect ratio of the original image to actually define the height of it.
In FF, if you say height: 100%, it goes to 100% of the original image, regardless of what the width of the image is.
I'd have to read the spec to figure out which is actually doing it the "right" way, though Safari is definitely harder to deal with.
Here is a quick example that highlights the differences https://codepen.io/kevinpowell/pen/abQRRqv/873294d292c864cd84825faad0b7baf3
One solution is to keep the height: auto (or like, don't declare one at all), and then, since you have the image wrapped in a div already, set that div to display: flex... since the image is a flex item, it'll stretch to match the height of the parent, which is a grid item and is already the full height of that section.
It's a bit convulted in a way, but it works without an arbitrary max-height 😉Thanks Kevin! I never thought about using flex for this but it makes a lot of sense 🙂 I appreciate the codepen