Header logo skewing in Safari when scrolling down on page

[xpurichan]

Description

While testing an unrelated issue, we noticed that the header logo becomes squished when we scroll down on the website's pages (initial load is fine). This behavior does not occur in Chrome or Chrome in our tests, but is present in Safari (both mobile and desktop) and possibly other browsers too.

Mobile:

Desktop:

Possibly related to https://github.com/OpenSourceOrg/dotOrg/issues/104 cc @geoffguillain and @toncijajic

[geoffguillain]

Hey @xpurichan,

Thanks for finding this one out. Safari seems to behave differently. I have updated the CSS to fix this issue.

I have tested on Chrome, FF, Safari (macOS + iOS) demo: https://open-source-initiative-development.mystagingwebsite.com/

Extra:

There is some issue with the padding/margin on the hero banner making it extra narrow on small devices. The words (even short ones) are clipping. It is only visible on staging but there is quite a potential to break the prod site if the wording changes.

[xpurichan]

Good catch @geoffguillain, I've copied their production banner on to the [staging site], edited the blocks and block settings, and pitched this and the logo update to them.

Awaiting the partner's approval now. I'll ping you on the logo update once approved.

[xpurichan]

@geoffguillain the partner would like to wait to apply this fix until the beginning of Sept. At that time I'll confirm a good day and time to push the update, and let you know in advance.

[geoffguillain]

Thanks for letting me know @xpurichan Waiting for approval to merge on prod!

[nate-allen]

@xpurichan I'll be taking this over. Let me know when this is approved for production. Thank you