I have an web application which renders perfectly in Chrome and Firefox but looks completely incomprehensible in Safari. I believe this is due to how Safari handles rem units for padding, the magin, and so on.
I set the font-size in html and root within my CSS to 6.25%, which, given the default font-size of 16px, translates the rem scaler to be 1px (i.e. 10rem becomes 10px). I then specify all sizes with rem units. I did this due to a few resources online suggesting this to be a good strategy, and it had served me very well so far.
However, in Safari (14.1.2, and almost certainly before, I'd never tested on Safari) it appears to only scale the font-size. All padding, margins, and so on are actually 9 times bigger than they should be. For example, I specify a margin to be 14rem 16rem 14rem 16rem and Safari will render it as 126px 144px 126px 144px, which scales everything up massively and makes the page unviewable. However, the font size is accurate.
Setting margin: 1px 1px 1px 1px and so on in my html CSS class doesn't seem to have worked.
How do I best fix this issue?