Skewed SVG in FF but not Safari (macOS)?

HTML & CSS
1

I am trying to work the edge cases here but cannot fathom why the GitHub logo skews vertically in Firefox (v115.4.0es) but not in Safari (v13.1.1) in a macOS (desktop) environment ?

githubSkew

I know they’re both ancient browser versions and there is no issue on my iDevices (running iOS16+), but I would like to know if it can be remedied ?

The page: http://corkeprojects.co.uk/apps/appGeometricWallpaper/index.html

2

I found a simple Stack Overflow solution:

“align-self: flex-start;”

.githubLogo {
align-self: flex-start;
width: 50%;
height: auto;
}

ref: https://stackoverflow.com/questions/10760243/safari-image-size-auto-height-css

2 Likes