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?
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 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
I have a really strange problem where CSS 3D transforms work sometimes and sometimes not. Before upgrading to the latest version of Chrome it always worked but with version 16 it only works at random.
More specifically it seems the -webkit-perspective doesn't take which makes everything flat (although the elements still get transformed). Changing the perspective in Chrome's "firebug" after the page has loaded doesn't affect anything either.
The page in question is here: http://exscale.se/__files/uploads/jquery-3d-circle.htm. I know there's quite a lot of code but the stuff related to the 3D transforms are all in this CSS file: http://code.google.com/p/sleekphp/source/browse/trunk/Sites/SleekBase/Modules/Base/CSS/jQuery.threeDCircle.scss
My question is: do you experience the same problem with my page or have you ever experienced this yourself? And if so, can you think of anything that triggers it?
I should mention I'm using Ubuntu 10.10 and Chrome 16.0.912.63.
Chromium blacklisted your GPU and refuse to do any 3d CSS.
the solution is pretty easy: turn on "override software rendering list" option in "chrome://flags".
see https://github.com/bartaz/impress.js/issues/40
Go to the Chromium web SCM interface and check that your GPU isn't blacklisted.
Also, go to chrome://gpu/ and check that Chrome reports 3D CSS as enabled.
Here's something that I found that may be the issue. When you use the code
-webkit-perspective: 600px;
You need to have that in the parent of the element you want it to affect. If it's in the actual element, it need to be combined with the transform, like so
-webkit-transform: perspective(600px) rotateY(45deg);
I designed this website, and I have been unable to place an the element ( div#endinglogo ) in a way that renders properly for firefox / Linux operating system users.
http://motivacionenlinea.com/
I am working with all browsers in windows 7, and although the design appears as it should in the firefox with MY operating system, my guesses to fix firefox/Linux have not worked.
My questions is what is proper margin to give to element div#endinglogo for it to appear where it should.
I have attached two images below.
The first shows how I want the header to look:
http://postimage.org/image/rsd27dvo/
The second shows how I been told it appears in browser firefox when using linux operating system:
http://postimage.org/image/rtgr3pqc/
I have a php file that serves firefoxLinux.css file, or at least that is the intent. Is this file being loaded when you see this website through firefox/linux?
Thank you for your help
In your firefox.css, you have a different negative top margin for your div#endinglogo. Make it -110px (like it is in your chrome.css file) and it should work.
On a related sidenote though, why are you creating multiple stylesheets for different browsers? For most things there are solutions that work consistently across browsers and operating systems, and only in a few cases do you need special styles (i.e. for IE, maybe some older versions of firefox). I think if you were to consolidate your styles you would run into less problems. Of course that's just my two cents.
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.