Hi I have this problem on font spacing for different OS on Chrome.
This is the screenshot from MAC Chrome,
http://awesomescreenshot.com/0382ihbwa3
This is the screenshot from Windows Chrome,
http://awesomescreenshot.com/0752ihdi26
Is there anyway to make them look the same?,
I don't have any problem with slight differences on content spacing on MAC vs Windows but this one affects the Main nav sections alignment.
Any help would be really appreciated, thanks!.
Chrome will soon be transitioning to use DirectWrite for font rendering, instead of GDI. This means it'll be able to use proper subpixel rendering of webfonts, like other Windows applications (inc Firefox and IE). It's a known bug that has been around for a long time: https://code.google.com/p/chromium/issues/detail?id=124406.
You can enable DirectWrite rendering now on Chrome Beta/Canary, but it's at the price of security because sandboxing is disabled. It's nice to know it's coming though: https://code.google.com/p/chromium/issues/detail?id=137692#c109
Related
I see this question has been asked in different ways but perhaps not in such a direct manner. I'm on a fresh load of Windows 8.1 with a default setting of ClearType Disabled. Web Fonts render perfectly fine in all browsers except for Firefox. In Firefox, they appear blurred or pixelated. When I enable ClearType they suddenly are fine in Firefox. Oddly if I then disable ClearType and logout and then login, they are still fine. I see that Google Chrome previously had a similar issue but understand they fixed the issue in Chrome. Is this an issue that needs to be addressed by Firefox? Are antialias properties going to be advanced in CSS to possibly force fonts to render properly?
Does the problem reproduce with hardware acceleration disabled?
If it does not, you are seeing this long standing issue1 - DirectWrite font rendering with ClearType disabled sometimes does not work correctly when using hardware accelerated drawing. As far as I know there are no font-rendering related changes in Firefox 32 (you didn't clarify if this is a regression versus Firefox 31 or you only just noticed this problem), but there are changes that extend the use of hardware-accelerated drawing.
Note that there is a difference between disabling font smoothing and disabling ClearType. If it works correctly in Chrome, that might be the issue, because Chrome has the directly opposite bug such as not respecting the settings2 correctly3.
v32 appears to have botched font rendering - with v31, WOFF and other font types render perfectly, whereas in 32 they are missing portions of the glyphs.
I have a bunch of images I've set up in css to appear as a 3d stack. It shows up correctly in Safari all the time (pc or mac) but only sometimes in Chrome. I haven't put in the Moz stuff so it certainly won't work there, but I'm aware of that and that's not the issue I'm dealing with. It seems Chrome on Mac (consistently) and on newer PCs works fine, but on my windows XP machine it doesn't work, and it's almost definitely an issue with the perspective property.
I've set up a jsfiddle isolating the section of the page: http://jsfiddle.net/4vXXd/
Here it is in chrome for windows xp with the perspective not working:
and in Safari for windows xp working:
Any thoughts on how to get this working?
Chrome will only render 3D css in true perspective 3D if GPU acceleration is enabled. If it isn't, it will instead use a kind of quasi-3d isometric projection.
To see if your chrome has GPU acceleration enabled, type about:GPU into the address bar and see what it says.
I've been playing with CSS3 transforms- rotations- and embedded fonts.
Some fonts completely disappear in Chrome when I apply a rotation.
Does anyone know why chrome blows this up?
What makes a font susceptible to this behavior?
Screenshot
So maybe y'all don't think I'm crazy- The text only shows up (kind of) after I try selecting it.
You weren't including the font correctly, try it like this:
http://jsfiddle.net/DFmtJ/1/
(tested on windows XP, Chrome 11.0.696.68 and 13.0.782.220)
------Edit--------
Cried wolf, the font that was being loaded was another one :/, though it is working for me on Chrome as in your first demo.
i've been trying out a bit of code posted to make image rollover buttons using only css,
this seems to work fine.
local testing showed no problems, IE, Firefox, safari all ok. even chrome displays as intended on the local version.
Once i move to a hosted test, IE, Firefox and Safari all display as intended but chrome offsets all the buttons right about 8-10 pixels.
here's the test page
http://www.fierysurprise.pwp.blueyonder.co.uk/bga/bgd.html
can anyone enlighten me as to what's happening?
site built in Kompozer
I assume you're referring to the squares under the "architectural design..." phrase.
I can't recreate this problem in Chrome v5.0.375.125.
What version of chrome are you using? Chrome tends to doggedly cache resources. Have you tried a cache refresh?
What version of Chrome are you using? I looked at your site in Chrome 5 and can't seem to tell a difference between any of the browsers you've mentioned.
Should i check in all? or in any one is enough because all share same rendering engine Webkit.
My question is related to HTML CSS rendering.
I know one difference Safari for windows and MAC both have Font smoothing (anti -alisaing)
Is there any other differences?
There's definitely a difference between Chrome and Safari due to Safari's font rendering. In Safari text tend to be a bit bolder due to the anti-aliasing algorithm and can sometimes take up a few extra pixels on the screen.
Also keep in mind that Safari uses the SquirrelFish javascript engine while Chrome uses V8.
I have found a difference in the way Safari and Chrome select SELECT boxes. I think Chrome seems to ignore line-height whereas in Safari line height seems to make a difference.
Safari Windows 5.1.7 v's Chrome Windows Version 22.0.1229.94 m
I think this is to do with the default user agent style?
I would check, yes.
Whilst the browsers all use the same rendering core, they're not necessarily on the same version (and there are multiple versions of Safari out there in any case).
Also, as slebetman says, font rendering is quite different depending on OS and anti-aliasing settings too, so you need to be aware of that.
Shadows are fast&ugly in chome; slower&prettier in safari (and firefox). IIRC there was some difference in CSS3 transitions too - but really, these details are still in flux anyhow and change from version to version.
In practice, I only check one of the two regularly, which is generally fine. Before putting major changes online, it's obviously not a bad idea to check again, but during development, it's not worth the hassle; they're so similar anyhow...
There are major and minor differences. Do check!
Minor: full support for CSS3 border-radius in Chrome. I've read about, but can't find, this in Safari.
Major: zooming in Chrome zooms everything. (This is the behavior in almost every browser.) Zooming Safari zooms text but leaves other things unchanged. Your ever-so-carefully-laid-out form is highly likely to be trashed if the user zooms in. Leave lots of extra space.