I've been working on a website and I can't get to make the text look anti-aliased when it's size is small on all the browsers.
I Can see the best results in Safari and Firefox, however, in IE and Chrome the text is anti-aliased in a bad way that it looks thicker than needed.
I've tried all the anti-aliasing solutions I have found but none fits my need.
Related
I have an image that has been cropped by rmagick. On Firefox and Chrome, it looks fine but on Safari (12.0.3 running on OSX 10.13.6) there is a black bar along the bottom. Here's two screen shots:
Firefox and Chrome
Safari
It looks like there is some empty space at the bottom of the image and Firefox/Chrome are making it transparent while Safari is making it black. (Forgive me if my terminology is off, I'm not a graphic designer).
I can't show the particular code because it proprietary, but any help understanding how to go about fixing the problem generally would be appreciated.
Alternatively, if you can better help me understand the specific problem, that would be great too.
I have PNG-24 exported from Photoshop CS6 and it looks like this in Chrome.
You can notice white strokes around triangles.
Same PNG renders correctly in other browsers.
Rendering in firefox is like this.
I am having this exact same problem. Seems like when there is very little contrast, Chrome tries to "solve the problem".
After much gnashing of teeth, I found that adding:
image-rendering: -webkit-optimize-contrast; /* Chrome (and Safari) */
to the problem element's css solved the problem.
Also, see this post: https://superuser.com/questions/530317/how-to-prevent-chrome-from-blurring-small-images-when-zoomed-in which deals with a similar problem.
In the photography portfolio linked below, clicking on individual images renders the photo at a max-height of 90% of the browser window. In Safari, Firefox, and Chrome. But IE9 seems to ignore this command entirely and the user must scroll to see any portrait oriented photo in its entirety.
I've googled workarounds, but haven't found any that apply to IE9. Mostly I found Javacript expressions in the stylesheet suggested as workarounds for IE6. Is there a less "expensive" workaround for IE9? Or is it no longer a problem (which is why I can't find anything) and I just have a browser setting wrong?
Here's an example of an image that renders properly in Chrome, Firefox, & Safari - but you have to scroll in IE9: http://russmoorephotography.com/#/portfolio/state-capitol-aisle-capitol-dome/
Edit: this actually doesn't work in Firefox either. Just Chrome & Safari.
I've seen theories around the interwebs for solutions to the cleartype issues with Chrome, Opera, and IE7-8. IE9 and Firefox ignore a user's preferences for cleartype, so I was wondering if there was a way to force a website's fonts to display as anti-aliased for each user visiting? I've tried hidden text-shadow, -webkit-font-smoothing, a little extra text-stroke, and more, all to no avail. Help?
No, you can't force browsers to render text with anti-aliasing, especially if they've chosen to respect the user's preference to not anti-alias text.
I'm using Helvetica on this site, viewing on OSX right now. The font rendered in Chrome (left) have more space on the top versus Firefox. This creates an ugly vertical misalignment.
From what I found this is a font engine rendering difference between Firefox and Chrome. Just wondering if there are ways to mitigate this or do I have to change font?
Thanks.