I have Firefox on Docker and CentOS 7.5, and on a machine with CentOS 7.5 but no Docker, and I compare a screenshot of a page that uses the well-known Roboto web font.
Both environments have the same exact version of Firefox, and theorically the same version of CentOS, but any yum update could spoil things.
They aren't pixel by pixel identical. I think the font is the same, It seems antialiasing and/or hinting is a little different.
I need to be controlled, for automated testing purposes, and avoiding to take again screenshots.
Any clue on how to control this?
Upper image is CentOS inside Docker, lower image is CentOS standalone:
Used CSS:
** UPDATE **
After playing a little with the font-kerning, text-rendering, and font-smoothing, the text has the same spacing but slighly different size, and also some pixels change a little:
[![Upper with Docker, lower without Docker][3]][3]
There is no consistent solution (as mentioned here) because each browser / OS has their own font rendering engine.
However you could try any of these CSS properties to see if they can help you with your issue (it will never be 100% but manually fiddling with these might get you close enough:
.item {
font-kerning: none/auto/normal/...;
text-rendering: optimizeLegibility/...;
font-smoothing: auto/normal/...
}
or try things like letter-spacing
Should none of those work you could always try the text-shadow hack (even though it's quite old) mentioned here
Related
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'm trying to use chrome in headless mode to do screenshot-comparison testing. I want to take a screenshot of my page, and fail the test if it doesn't perfectly match an existing screenshot.
This is all working perfectly, with the exception of text rendering.
My tests are running on my local machine on OSX
My tests are also running on Travis CI on Ubuntu
I'm rendering everything in Arial
The text rendering between OSX and Ubuntu seems to be very slightly different, to the extent that the screenshots are no longer 100% identical and the tests fail. All of the other rendered HTML matches perfectly.
Is there any way to make text rendering 100% consistent between the two environments? I don't mind if I need to disable anti-aliasing, or anything like that -- it doesn't matter if the text is blocky, or not perfect, so long as it matches exactly between the two envs so I can reliably detect breaking changes.
I've tried setting:
user-select: none;
-webkit-font-smoothing: none;
But this didn't seem to help.
Is there some way to say, have Chrome use some built-in text renderer rather than relying in any way on the OS? Or is there some other approach I can take here?
I've got text on a website that is styled with the CSS rule:
font-weight:normal;
When viewing it through Chrome version 25.0.1364.99 on my local machine that is running MacOS 10.7.5 the font looks normal, but when viewing it from a different computer with the same OS version, same Chrome version, and same font set the text looks abnormally thin.
Is there something other than styling and font that could be affecting how the font is rendered in the browser??
Make sure they both have LCD font smoothing set. This can make a difference in how a font looks visually. This can affect some fonts more than others, so the system font may look the same between the two, while the one you're using may look different. Also, if one screen is much higher quality, this setting can have a more profound effect, but they still may look different (e.g. retina vs non-retina).
On 10.8 this setting is under System Preferences, General.
Check this one:
font-smoothing:antialiased;
-webkit-font-smoothing: antialiased;
text-rendering:optimizeLegibility;
It is possible that one of the operating systems has different accessibility or display options. Check out the font options under the display settings. That could be your culprit.
I have a fairly standards compliant XHTML+CSS site that looks great on all browsers on PC and Mac. The other day I saw it on FF3 on Linux and the letter spacing was slightly larger, throwing everything out of whack and causing unwanted wrapping and clipping of text. The CSS in question has
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
I know it's going with the generic sans-serif, whatever that maps to. If I add the following, the text scrunches up enough to be close to what I get on the other platforms:
letter-spacing: -1.5px;
but this would involve some nasty server-side OS sniffing. If there's a pure CSS solution to this I'd love to hear it.
The system in question is Ubuntu 7.04 but that is irrelevant as I'm looking to fix it for at least the majority of, if not all, Linux users. Of course asking the user to install a font is not an option!
A List Apart has a pretty comprehensive article on sizing fonts in CSS. Their conclusion is to use "ems" to size text, since it generally gives the most consistent sizing across browsers. They make no direct mention of different OSes, but you should try using ems. It might solve your problem.
Have you tried it in FF3 on windows?
Personally, I find a good CSS Reset goes a long way in making your page look the same in all browsers.
Sizing/spacing differences are usually difficult to catch. What you can do is create a Linux-specific CSS file that will contain these values adjusted for Linux, then do a simple JS-based detect to inject that CSS if the User agent is a Linux one.
This is probably not the cleanest approach, but it will work, and with the least intrusion into your otherwise clean HTML/CSS.
I find the easiest way to solve font sizing problems between browsers is to simply leave room for error. Make divs slightly larger or fonts slightly smaller so that platform variation doesn't change wrapping or clipping considerably.
Unless your site is expecting an above-normal amount of Linux-based traffic, you're probably going to adversely affect more people if you "sacrifice the user’s ability to adjust his or her reading environment" as opposed to just not caring about the Linux experience.
Having said that, if you do want a nice Linux experience, you should address the reasons behind why your design breaks under small variations in font spacing, given that these issues are difficult to control under current CSS implementations.
I've got a website that I've just uploaded onto the interwebs, and it's displaying differently using Firefox 3.0.1 on Ubuntu and WinXP.
Two things I've noticed on Ubuntu:
The favicon is missing
The background color isn't displaying (it's set in the stylesheet)
What have I done wrong? The CSS file is being fetched under Ubuntu, so why isn't it applying all of the stylesheet, just the bits it likes? And why isn't the favicon displaying? Are they the same problem?
The answer on the background color: invalid HTML. But I'd love for someone to explain why it works under Windows and not Ubuntu.
The answer on favicon: previously, there was no favicon. The browser cached the lack of favicon. Clear the Firefox cache, and all is well.
I would first suggesting getting you html and css code validated. If there are any errors in your markup, these can cause errors in the rendering.
CSS Validator
HTML Validator
I've also run into differences between FF3 on WinXP and FF3 on OS X (mostly with CSS positioning). The CSS and HTML both validated properly, but I was never able to figure out why there was this difference. I would think that the rendering engine would be the same, but apparently there are at least a few subtle differences.
I agree.. there are subtle differences between the two operating systems. Part of this is just font sizes and how line height and letter spacing is determined. So much of page flow is based on these whitespace elements interact with other page elements.
i believe this is a font issue and a browser / OS issue.
we know that different firefox versions are dependent on the OS - there are some firefox extensions available for Linux, some firefox extensions for windows are available.
it's the font I guess.
Try to download mtts core fonts (microsoft true type ) which includes all the windows fonts so that firefox can display the fonts you specified in the css.
also you could check that you use fonts which are available on both platforms. Otherwise, I suggest rechecking and revalidating your code.
The other issue could be the screen resolution. It might be okay in windows with your high resolution but not with the low resolution ubuntu version.
Almost too obvious to say, but are they both "Firefox 3.01"? One isn't, for instance, Firefox 3.01 revision 3 update 6 service pack 9 and the other, well, you get the picture.
Even if they were both the very latest Firefox for that platform, doesn't mean they're exactly the same thing.
To see what's different, enter about:config in the address bar in Firefox in both Linux and Windows, press Enter, and compare the output
Ubuntu (I believe) apply their own patches to Firefox, so maybe this cause. Having said that, I thought that the patches were only for minor, GUI-type changes.