Logo aspect ratios are skewed on Safari when page width < 900px
Closed this issue · 11 comments
Describe the bug
On some small screens, the aspect ratio of some branding logos at https://drp.dataone.org are skewed. This was reported by a user with iPhone 14/iOS 16.6/Safari 16.6. I can't reproduce this on my device (Moto z3/Android 9/Chrome 115.0.5970.166).
To Reproduce
Steps to reproduce the behavior:
- Go to https://drp.dataone.org
- Scroll down to footer
- Some logo aspect ratios are skewed
Expected behavior
A clear and concise description of what you expected to happen.
Screenshots
Horizontal display:
Vertical display:
Desktop (please complete the following information):
- OS: n/a
- Browser: n/a
- Version: n/a
Smartphone (please complete the following information):
- Device: iPhone 14
- OS: iOS 16.6
- Browser: Safari
- Version: 16.6
Additional context
Add any other context about the problem here.
This is seemingly an issue with all Safari browsers. This is what I see in version 15.4 (17613.1.17.1.6):
It looks ok when I change width: 100% to width: auto but then the issue is that the logos don't scale with the width of the page. Interesting that Safari is the only browser that has this problem.
The issue is that Safari seems to be interpreting width: 100% as 100% of the width of the div container, whereas other browsers seem to understand that it means 100% within the constraints of the aspect ratio, or something like that.
I'm still struggling to understand the issue Safari has here. If width: auto and height: auto are set, then it respects the aspect ratios but does not scale down when the width decreases below 900px, but if width: 100% and height: max-content, then it does scale them down but it also maxes out the width to the size of the div container.
I'm considering adding a css rule that says
@media only screen and (min-width: 900px){
#Footer .footer-logos-list img {
width: auto;
height: auto;
}
}Which would at least make this problem less of an issue for Safari users on wide screen devices, but would still be an issue for Timothy on his iPhone.
Really I just wish Safari would figure this out since it's clearly their problem and not ours...
It's very hard to find information on this issue but the most similar thing I can find seems to be as-yet unsolved: https://stackoverflow.com/questions/10760243/safari-image-size-auto-height-css
This issue has been fixed for browser windows wider than 900px. When the page is wider than 900px, width: auto is set. Narrower than 900px (the minimum width of the list items in the footer), the width scales to 100%, as "auto" ends up sticking the footer at 900px width regardless of the page width (this happens on all browsers). There is likely some other piece of the puzzle that I have not found yet.
Keeping the issue open as this is only a partial fix.
Screenshots of partial fix in use—wide, then narrow Safari pages:
Reopening as this issue isn't yet fully resolved.
The other thing I was thinking is: since the CRREL logo is the only one that gets stretched now, we can just add whitespace to the sides to make it 150px wide, then it would scale correctly.
New fix: make all branding logos 44 px high and force the browser to display them with correct ratios.