not working on apple
I have an issue on my portfolio where i use different layout depending on the width of the screen but on apple it seems to be completely broken...
link to my portfolio : https://mon-portfolio-sigma.vercel.app/
and th github repository : https://github.com/tototriou/mon-portfolio
I don't really understand where it could be from I have this result on apple instead of the 2 layouts I link you.
Thanks for your help
GitHub
GitHub - tototriou/mon-portfolio
Contribute to tototriou/mon-portfolio development by creating an account on GitHub.
13 Replies
I don't have any clue, it's working on my laptop and phone but when I'm switching to apple nothing works anymore on safari and chrome
To fix the photo, you could try aspect-ratio: 1; on the .photo-profile class and object-fit: cover or contain; on the image itself. It should fix the stretching.
Aspect ratio makes the width and height the same. You can get rid of the height or width then.
I haven’t look at the whole css yet. It’s just a quick tip 😀
i ll try this but the whole css is destroyed not gonna lie I'm a bit scared that I'll have to do it again only because apple do something on my style sheets, maybe not taking it all
This issue isn’t a browser issue, right? I’ve doubt out, that it looks weird on any browser on my iPhone.
no it isn t I've tested it on chrome on apple and isn't working
edge neither
All browsers on iPhones are just skins of Safari.
They have to use the webkit engine, which means it's Safari under the hood for all of them.
This is changing, but only in Europe.
Didn’t know that . Thanks
Other than the image at the top, what else is broken?
Safari has issues with
aspect-ratio in some situations.
For the image, I'd actually take off everything you have on there, and add height: 100% and leave it at that. Should work fine I think.thx for the explanation I was starting to become completly insane
I'm using different fonts that don't work, an animation on my landing page with the 2 circles rotating but not in the right place, and media query that doesn't work. I have 2 layouts for my landing page and it doesn't detect that I'm using a phone or any device less than 800pixels wide.
this is how it's supposed to work
I don't have icons either at the end
The animation is a bit odd, not sure why it's not working properly (or the same as in Chrome, anyway). I did notice you have a transform in your animation that's the same on all the keyframes. It might have something to do with that, along with moving it with
top and left. It shouldn't, but it might. I'd probably remove the transform from the animation, and the top and left, and just have a transform on the two pseudo's to position it where you need it.
The font seems to be working? They look more or less the same to me? You can sometimes get small rendering differences between them (slightly more bold, or thinner), but they seem to be working?
Mobile is working for me too, I think.Maybe delete it, I don't think it adds an "stylish" animation, which would solve my problems
now it's working on phone need to check on tablet