I'm working on a responsive website and when checking it on my iPhone (iOS 13, June 2020) I found that the font size was different between Safari and Chrome.
I tried several things to account for it, but had trouble finding the cause.
I suspected it was related to some CSS I had from long ago: -webkit-text-size-adjust: 100%; Removing and changing this value had no effect on the difference though, so it was a red herring.
What would cause a discrepancy between the rendering of the same site and CSS on these two apps?
Here are two potential causes, there are surely more, but these were the ones I found and solved my problem.
Chrome obeys the system-wide "Text Size"
If you use the "Text Size" slider in control center, or the related settings at the system level, Chrome automatically alters the text of sites!
From what I can tell, there's no setting in Chrome for iOS to disable this linkage with Text Size.
So if you want Safari and Chrome to match, make sure that the Font Size state of your phone is in the middle position that's marked as "Default".
Good to know both in case you use the Text Size controls day-to-day like I do, or your users or clients do!
Safari has a "Page Zoom" setting in Settings app
On the other side, Safari has a setting called Page Zoom that goes from 50% to 300%. It's found in the Settings app under Safari > Settings for Websites > Page Zoom.
This setting can cause total chaos with CSS layouts at sizes like 200%.
Either way, if there's a discrepancy between the two apps, this Page Zoom setting is worth checking out as well.
Thank you for pointing me in the right direction - I've been having horrendous problems working out why Chrome on my iPhone SE was rendering text larger than Safari!
I don't seem to have a "default" setting for Text Size (Settings > Display & Brightness > Text Size).
However, -webkit-text-size-adjust: 100% did work for me - at least for Chrome which was where I was struggling.
In iOS 13, Safari exposes the media font-size to the final user, it means that in your root page (html tag) the css "font-size" rule is overrided, forced by the user and not possible to change.
And Chrome for Safari is not using rendering engine "Blink" as for Android, it's using Safari webKit render engine, so, Chrome for iOS is "Safari"
Anyway, you can react to this adjusting your media queries to work with "em" units instead of "px" in other words:
Change bootstrap (if used) breakpoints to "em" instead of default pixels.
Make your components border, paddings and other stuff pixel based.
Another way is understand what are the users needs and react before they need to adjust the font-size:
Adjust font size based on viewport (css clamp)
Use responsive layout
Use css border-box, box-shadow...
Another way is recalculate everything, at much cost:
What if the user changes the root’s font size?
I had a weird problem with paragraph on iOS14 ,13, it was enlarged, this has worked for me for Safari and Chrome:
-webkit-text-size-adjust: none;
I hope it will help someone too.
I'm working on a website and Firefox is displaying it's font extremely large. Chrome and Safari are displaying normal font size. I've found that you can change font display by typing
about:config
in the firefox address bar and changing the
layout.css.devPixelsPerPx
value to 1. Although this might work on some systems, I don't want my user to need to do this.
How can I make sure that the font is displayed correctly? I've tried adjusting CSS with
-moz-font-size
and variants but it doesn't work. Is there a specific syntax for this?
found this great site and this is my first question here.
Currently i m working on a site, it looks good on most of the browser but 2 problems found on some of the browsers.
Here is the page:
http://www.linkmen.com.hk/web2013/20130426/contact.htm
and here is the problem:
http://www.linkmen.com.hk/web2013/20130426/problem.png
problem 1: On some safari machine will display the background like this. it also happened when open firebug on browser or so.
problem 2: I tested on couple window vista with ie 9(new machines), seems the site's content only show on Browser Visible Area Only, when scroll down everything below are gone.
thank you~
move orange background .orange class from body, that has height:100% to .container_contact that has min-height 100%
I built a website that works great on Firefox, IE, and Chrome. Client goes to a tradeshow and realizes the website menu went bonkers in their iPad.
broken menu http://www.glassdoctordenvermetro.com/wp-content/themes/GDDenverTheme/images/photo.JPG
I tried a website that lets you preview your design by simulating it in case you don't have an iPad (like me). But the problem is it looks fine:
http://ipadpreview.com/previewer?url=http%3A%2F%2Fglassdoctordenvermetro.com%2F
What would suggest I do to figure this out? Is it a problem with the font being different on every browser perhaps? The width of the tab changes based on the menu font and wording but again, it looks fine on all other browsers I tested.
Thank you
Opening it an iPad simulator shows that the font is a much wider font and there's also greater letter spacing. You should specify more options in the font-family tag to have another more condensed font that is available on iOS. You could also bring the font-size down on iOS. The big issue with the testing site you're using is that it's still outputting HTML, the only trustworthy type of site like that would have to generate a screenshot image to ensure consistency.
Here's some fonts to help: http://iosfonts.com/
And 11px works with the existing font.
Alternately, removing the uppercase transform makes it fit.
I just started coding my own website, and since I love typographic web design I was trying to use a really big custom font for the logo. Unfortunately during my testing on Safari using a MacBook Pro with Retina displays I noticed that there were some artifacts in the font rendering :/ First I thought there was some mistake on my part, but then I discovered that it happens with any font if it is big enough...
This behavior is visible on websites like http://fittextjs.com where the outline of the title is not correctly rendered. For anyone without a retina display here's a screenshot of what I'm talking about http://cl.ly/JL0j
Odd enough this strange bug isn't present on Chrome, and since they're both Webkit based I thought that maybe the latter is using a CSS default that renders text correctly.
Any CSS guru that knows how to solve the situation before me filling a rdar :) ?
UPDATE: I should note that I already tried using -webkit-font-smoothing: antialiased; and it doesn't work :/
I filled a radar about it yesterday and got an answer today (never got a response so fast!).
Apple engineers are aware of it and consider it a serious bug, so I hope it'll get fixed soon. In the meantime there's no workaround available apart from using images :/