I have a problem that I can’t solve since last week. I’m using windows pc and I have a safari browser to test the compatibility of my website. Here’s the site http://www.theeyedoctorshavertown.com/ scroll down to the ABOUT US section and you will see 3 doctor biography. At the last box the height is different than the others but in other browser like chrome the boxes has the width and height. This is because the font is larger in safari than other browser.
I don’t have Safari to test with, but in Firefox, the text is not fitting within the height in the third box. The bottom line is half cropped by overflow: hidden.
People using almost any browser can increase the default font size, so a design should be flexible enough to cope with that. Fixed heights are best avoided where possible for this reason.
2 Likes
Safari for Windows hasn’t been supported for years. (It was discontinued in 2012, IIRC.) So I wouldn’t waste any time worrying about it, if I were you. I doubt you’ll have any visitors using it.
2 Likes
Looking closer, the size should not vary between browsers, because you have the size fixed at 14px for that class.
This can still vary between Windows/Mac as they have different default fonts installed, and even if the height is the same, horizontal spacing may vary, causing extra word wrap.
But in this case you are using a Google font, not a standard system one, so all OS should see the same.
The reason for the difference may be:-
If it is Safari for Win, I imagine that does not support the Google font and is displaying a sans-serif system font instead.
As mentioned, don’t waste time supporting a long dead browser. But do fix it for current ones.
2 Likes
I may have a try and look at it on Mac OS. Hope it’s fix in MAC OS
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.