0
156
ViewsSVG elements font-size change specifically on MacBook Firefox
This is weird because I have another Mac desktop, and firefox (same version I guess) and there is no problem. Only on my MacBook.
On my web-game, I have 4 buttons:
"Play" : "Cars" : 'Multiplayer" : "Download"
The page looks like this:
Edit: Live preview at parkingmaster.tk
The reason the buttons don't look weird now is because I made a simple program that changes it on firefox.
But other OS's have windows/linux, and it'll look weird on there because the program isn't specific enough (MacBook MacOS Big Sur).
This is what it looks like without that program:
As you can see the svg elements on the buttons are "Up".
I tried changing the margin/padding, but then I found out it was the font-size css property.
It's usually "45px" because that works on every other device, but on mac, it looks better with "51.5px" (that's what the program does)
If this is a OS specific thing, how can I detect if the OS is "MacOS Big Sur" or specifically, the one I'm using (11.6.6)
TL;DR
In JavaScript, how can I check if the OS is "MacOS Big Sur/MacOS Big Sur 11.0.0+" and the browser is "FireFox Browser/FireFox Browser 90+"?
1 answers
Answer question0
To solve this on the .nav-btn element change your display: inline-block to display: inline-flex and add the align-items: center; and justify-content: center to this .nav-btn element as well.
Detecting specific browsers by version is a false dawn and opens up potential headaches in the future, for instance, every browser on an iPhone is just Safari in a product wrapper i.e. Chrome for iPhone is just Safari in a Chrome wrapper.