I ran into a really strange issue and I can't really get my head around what is happening here. I was working on the theming of my recent React App when I realised that the default font size is different in Safari than in Chrome or Firefox. At first I thought this has to do with responsive font sizing since I know that Safari treats the rem values differently. Thus, for testing purposes, I have created a fresh install of CRA and tested a header and a paragraph with fixed font sizes:
h1 { font-size: 32px; }
p { font-size: 16px; }
Unfortunately it happened again and the result can be seen here:
There is about a 4px difference between Chrome / FF and Safari. When checking the developer tools of the individual browsers, all of them show the right font size (and line height).
I thought this might have something to do with Safari (since it seems that this browser is on the path of being the new Internet Explorer), so I have created a simple HTML 5 page to test the behaviour again. This is the result:
As you can see, everything appears as expected which indicates it has nothing to do with Safari.
I have also tried to reset the CSS with normalize.css but no success either. Did anyone else experience this problem?
My setup:
SYSTEM --
Mac OS 11.0.1
Safari 14.0.1
Chrome for Mac 86.0.4240.198
Firefox for Mac 82.0.3
CRA -- 4.0.1
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"web-vitals": "^0.2.4"
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
After playing around for hours, setting up test projects and trying to verify the results on codesandbox.io, I found out that (occasionally) Safari is setting the initial zoom level to 125%. Since this is not always the case I am not sure if it has something to do with my system or it is really something with CRA and Safari...
I would be great to hear if anyone has been experiencing the same issue.
Sorry if I have been wasting anybody's time here!
Related
I'm using Safari for Mac on OSX El Capitan (my Mac is early 2009 so doesn't allow any ore updating).
When I visite www.mediamarkt.nl I often see question mark icons where the fonts should be. Like this:
I went inside the console and figured out it had something to do with the Geomanist font. Cause when I switch if of on various elements that show those question marks, the texts is readable again. The same when I change Geonamist to for example Arial.
On Chrome it works normally and also on Safari on OSX Sierra (which I can't install cause my Mac is old). I suspect it has something to do with the way the Geomanist font is begin coded into the website. Can someone figure out what is done wrong in this font css coding? Something that isn't quite compatible with older Safari versions?
I assume it has to do with the format of the font file Mediamarkt is serving. Their custom fonts are served in woff2 format, which all modern (evergreen) browsers support. However your older version of Safari might not, as you can see in this support table on caniuse.com, https://caniuse.com/#search=woff2.
Hope this helps.
Regular fonts look normal, but large fonts look jagged in Chrome (not in Safari or Firefox). I'm using a Macbook Pro running Mojave.
Example codepen
.large {
font-size: 300px
font-weight: bold
}
Chrome
Safari
Firefox
I've tried the recommendations in this SO post (enable-font-cache-scaling and accelerated 2D Canvas), but the issue remains.
Turning chrome://settings "Use hardware acceleration when available" OFF fixed it for me.
At first I was not able to reproduce the jagginess/blockiness, but I realized I was looking at it on MacOS [High] Sierra, and you specified Mojave. So I tried it there, and it is absolutely awful. I'm really surprised this escaped anyone's notice in testing. I'd imagine there will be an update to either Chrome or Mojave that addresses this soon.
I guess this is actually related to a change to the OS defaults; Apple apparently disabled sub-pixel font rendering in Mojave and passed it off as a "refinement". Sub-pixel rendering is handled by the GPU, hence disabling GPU rendering in Chrome "fixes" it. I guess you could also use the defaults write technique specified in the link I mentioned.
In any case: this is probably not something you can address in your CSS code, since it is related to user-local/machine settings.
i have developed this website http://www.falestinona.com/nashra the website tests on my laptop are correct and same design over IE, Chrome, FF and Opera the problem i have found that same version of firefox shows the design different on different computers. FF on my laptop shows correct design while same version of FF on other laptop shows design problems and this problem shows with my friends some correct and others have design problems on FF. FF is clean with no addons shows the same problem. Attached Two Images: FF with Correct Design FF with Wrong Design Same version and Clean FF and Latest Version
https://support.cdn.mozilla.net/media/uploads/images/2015-06-09-22-05-36-e5d7cf.png
https://support.cdn.mozilla.net/media/uploads/images/2015-06-09-22-05-32-b35e5a.png
in Mozilla Firefox font rendering and line height rendering of the font differ between devices and automatically calculated so it differs between devices. the solution was to set Static Constant line height for all html elements and forcing this change.
CSS StyleSheet Change:
#import "amiri_font/amiri.css";
*{
font-family: AmiriWeb, 'Amiri QuranWeb', Amiri;
line-height: 1.6 !important;
}
Very recently this used to work well in Firefox. Now, it seems to be broken. I can't find any relevant report on bugzilla or elsewhere... Anyone know what's up?
see caniuse:
http://caniuse.com/css-sticky
and then test in FF:
http://html5-demos.appspot.com/static/css/sticky.html
To elaborate on #minitech's comment:
position: sticky is right now controlled by a preference, namely layout.css.sticky.enabled. You can turn it on in about:config if you'd like to play with it already in Firefox 31.
Bug 916315 enabled it by default starting with Firefox 32, which is currently in beta. It is supposed to be enabled by default when Firefox 32 becomes the stable release, however you never know what show-stopper bugs might be discovered in the beta period (or by Aurora and Nightly users).
I'm using google chrome 5.0.307.9 beta under ubuntu 9.10 and it seems not properly render css opacity.
Using "opacity: 0.5;" under both windows chrome or windows/linux firefox make my element half transparent, but this attribute seems ignored on linux chrome. This was working on previous versions.
Any ideas about what's going on ?
For sure this is a bug in google chrome itself. using opacity: 0.5 is totally valid CSS markup, and it will work on the windows [and mac?] versions of chrome.
For now, all you can do is... try using a different browser [firefox/safari/konqueror], or ignore that your div isn't partially transparent until the fix comes.
I know that isn't really a solution, but I don't think there is much that you can do =/
Hope that helps.
This was a bug in the build, I noticed problems in a VM a week ago with this, update your chrome to resolve, current release is 5.0.322.2 Fixed it on the VM here at least, hopefully the same for you.