Why does my website header look different in Safari on macOS compared to Windows browsers?

Question

Created 5d

Replies 1

Boosts 0

Participants 1

Hi Developers,

I am working on a small project and I noticed that my website header looks different in Safari on macOS compared to Windows browsers like Chrome and Edge.

In Safari, the header text and spacing look slightly shifted (screenshot attached).
On Windows browsers, everything looks perfectly aligned.

Here is my live project for reference: https://gratuitycalculatorae.com/

Screenshot from Safari (macOS):

Is this related to Safari-specific CSS rendering?
Should I use -webkit- specific fixes or is there a better cross-browser solution?

Any guidance or best practices would be really helpful. Thanks

Boost

Answer 1

ahsnai OP

5d

Possible Reason: Safari has slightly different handling for flexbox and default font rendering.
Solution: Try adding CSS like:

.header { -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }

Also, check if line-height or margin is set differently by default in Safari. A CSS reset or normalize.css file can help.

0