Logo aspect ratios are skewed on Safari when page width < 900px

[iannesbitt]

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:

1. Go to https://drp.dataone.org
2. Scroll down to footer
3. 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.

[iannesbitt]

This is seemingly an issue with all Safari browsers. This is what I see in version 15.4 (17613.1.17.1.6):

[iannesbitt]

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.

[iannesbitt]

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.

[iannesbitt]

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.

[iannesbitt]

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...

[iannesbitt]

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

[iannesbitt]

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.

[iannesbitt]

Screenshots of partial fix in use—wide, then narrow Safari pages:

[iannesbitt]

Reopening as this issue isn't yet fully resolved.

[iannesbitt]

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.

[iannesbitt]

New fix: make all branding logos 44 px high and force the browser to display them with correct ratios.