Hopefully someone can help me figure this one out. I've tried countless things and I can't seem to figure this one out.
Using google chrome, this is what I see. The noticeable part is the icons of the navbar:
and scrolled to the bottom:
As you can see, the font weight is completely different and affected simply by scrolling. This behavior seems to happen only on Chrome on OSX, currently running 23.0.1271.95 (latest)
I have tried to force the weight on the font, with !important even -- it will alter the weight, but as soon as i scroll it will lower the weight for no apparent reasons. Any hints as to what could be causing this problem, and how I can possibly fix this, to ensure my website renders properly everywhere?
Most likely something is causing the browser to disable subpixel font antialiasing after you scroll the text. This could be any kind of CSS transformation, transparency, etc. On OSX, this will make the text look much less bold (see here for more on this: Unwanted Bolding added to font in browsers)
The solution is to pre-emptively disable subpixel font antialiasing. Apply this to your nav bar's CSS:
#navbar {
-webkit-font-smoothing: antialiased;
}
Related
On Windows, and to a certain degree also on Mac OS, with different browsers (Firefox, Chrome, Safari), our menu bar has rather pixelated/blurry font-rendering. This is on an ASP.NET Core 2.1 site that uses Bootstrap 4.1.3 but it's easy enough to reproduce with just simple HTML: https://jsfiddle.net/2tgc9r84/
<html>
<body style="background-color:#e72c87;">
<p style="font-size:20pt;">
This is some text that looks terrible.
</p>
</body>
</html>
Interestingly, the same font renders just fine in other areas of the site. I have noticed this on a 4K monitor that has 150% scaling activated but the issue also shows up with 100%. I have also tried this with different fonts, so apparently it's not an issue with the font, either.
Originally I thought this was an issue with transparency or transformations but finally, I tried simply changing the background color - and it turns out this blurriness is very obvious with red and dark blue (and of course, combinations of those, like magenta), and pretty much invisible with most other colors. Also, by changing the main background color, I can reproduce the issue for the other areas.
You can directly have a look at the site where this occurs here: https://beat-the-rhythm-vr.com/Home/Social (the navigation with the blurry text shows up after accepting the cookies).
Here's an image that shows the effect with different backgrounds, and also rendered on Mac OS (the Mac OS screenshots appear smaller in the image):
As far as I can tell, this does not happen at all on iOS. On the Mac, I don't quite see the issue on the screen but it does become obvious when making a screenshot. This could, however, also be an artifact due to scaling on the screenshot.
This is what it looks like on iOS (I get the same blurriness on Windows when making the Window small enough to get the same layout as on mobile, so that's also not the issue causing this / fixing this):
The obvious question: Is there any way to fix this, and if so, how?
EDIT: This is in addition to the comment on Porter's answer (I can't add screenshots in comments, so I'm posting this here):
EDIT 2: While this article is about a slightly different issue, my guess is that what I'm seeing is really just a limitation of ClearType that is related to what the article outlines: Color-aware ClearType requires access to fixed background pixels, which is a problem if you don't know what the background pixels are, or if they aren't fixed
ClearType apparently doesn't work when the background color isn't known, and from what I'm seeing, it seems to be designed primarily for black text on white backgrounds, also works well with light colors on dark backgrounds but not really so much for red/blue/magenta backgrounds (and any font-color).
I am unable to reproduce this on a 1080p or 4K display, with either mobile or web view on Firefox and Chrome. Fonts do tend to blend with the background color, so not every pixel of the font is going to be the same color; It'll blend on the edges. The smaller the font, the less pixels it has to work with for blending. If you use a larger font, does the same problem occur?
I have converted a badge/image from PNG to SVG in order to be able to re-use the asset in various sizes etc.
The problem is that depending on the specific webpage i'm embedding the SVG on, it either looks super crisp (as intended) or looks bad with some sort of anti-aliasing gone horribly wrong.
Even on the pages where the SVG looks crisp after load, I only have to scroll the page a bit until it looks horrible as well.
Please look at the screenshots below to see the exact difference on the BADGE (SVG):
It seems the browser only messes with the SVG right where the SVG meets the image behind it. The SVG is only slightly transparent in the gray center, so that should not be the cause of it.
I have tested in Chrome, Edge, Safari which all do the same thing.
Does anybody know what might be the cause of this?
I found a fix to what clearly seems to be a somehow undiscovered big bug in all modern browsers in regards to handling SVG through CSS as a background on an element overlapping another element with background/image.
The fix for my case was simply adding a background-color to the element. Since the element is completely round I can simply make a border-radius as well, so the background will never appear.
If the element however was not a complete round circle, this would not be a workable fix.
Text rendering on the navbar, at least on Yosemite's Safari and Firefox, is very bad. Text doesn't show the curve it has but is like thicker and more imperfect.
If I zoom in the webpage, it improves, also if I force focus at any element.
I wouldn't care much about this if it were always regular, but the problem is with the focus. The page doesn't seem to be well designed, and I don't like that impression at all. I'm using Bootstrap framework with Ubuntu typography. This happens at a font-weight:500.
Example http://www.bootply.com/Ptp4gXpHAF. Just click the search bar.
This is the difference between what I want and what is rendered:
The image shows blurred due to upload resolution but I think there is a big difference.
I just changed the font-weight to 300. Maybe safari tried to render to higher font weight but when I clicked on it the font-weight property was overridden. Within setting it to 300 it worked just fine.
Sincerely hope someone can provide solution for this.
Normal zooming by holding Ctrl + Scroll (or +/-) is useful but it just doesn't work in certain part of some sites.
For example:
http://www.freemalaysiatoday.com/category/living/2012/04/02/malaysias-top-rock-act-blister/
As you can see, zooming in and out has no effect at all to the text in the comments using facebook account. This problem only happen to Chrome but not IE or firefox.
No matter how large other font becomes, the size of the font (yes, font only) in comments remained unchanged and this is annoying.
Any solution please?
Look at:
http://code.google.com/p/chromium/issues/detail?id=104083
It can be achieved with the css rule -webkit-text-size-adjust: none;.
If one wants to disable it, the link also contains a solution in step 8, using an extension CSS rules are inserted in all pages which override this
So I'm stuck with this annoying and minor IE8 problem. When I'm scrolling it seems like IE cuts off some piece of my H1 titles. I made a video so it's clear what is happening.
The HTML & CSS are very large, so before I'm going to include all the HTML and CSS I would like to know if someone knows an possible cause. Or maybe it's an known IE problem?
The titles (BRACELETS, NECKLACES, ..) are H1´s with z-index set to 999.
The video can be found here http://imageshack.us/clip/my-videos/607/wcw.mp4/
A live code sample would be great to explore. My only guess based on the video (which is very helpful in this scenario nice!), is that IE8 is choking and lagging on rendering items as you are scrolling. Is there any markup changes tied to scroll events or perhaps some CSS "fixed" items on your page?
i know it's a very old question but i think it could help others
I found myself having the same problem with a free-for-commercial-use font
The solution i found was playing around with the line-height CSS property
In some sports setting it to the height of the div, in others to the font-size, in others to a little bit more than that
In my experience it changes from font to font and from font-size to font-size