Menu
I have used this snippet to prevent webkit from changing antialiasing when using CSS transforms:
html{ -webkit-font-smoothing: antialiased; }
This works fine for most cases, however I noticed some weirdness in chrome when playing around with Bootstrap using this HTML:
<button class="btn btn-inverse">John Doe</button>
<a class="btn btn-inverse">John Doe</a>
This is how it looks in OSX/Chrome:
Fiddle: http://jsfiddle.net/hY2J7/. In fact, it seems that it is not applied to buttons at all. Is there a safer technique to trigger the same antialiasing in webkit for all elements?
422
If you're design is placing text onto a dark background then you have a good reason to look towards using the WebKit and Firefox prefixed font-smoothing options to make the text look lighter, but you should be warned that these only work on Mac and OSX and leaves the billions of other users with a sub-standard view.
auto - Allow the browser to select an optimization for font smoothing, typically grayscale . grayscale - Render text with grayscale antialiasing, as opposed to the subpixel. Switching from subpixel rendering to antialiasing for light text on dark backgrounds makes it look lighter.
Antialiasing refers to the smoothing of jagged edges of drawn graphics and text to improve their appearance or readability.
Your answer is:
* {-webkit-font-smoothing: antialiased;}
As the -webkit-font-smoothing is not a standard property, its inheritance rules are not properly defined.
In this case, for button elements, the default value for -webkit-font-smoothing is 'auto' not 'inherit'.
You can solve this by adding this css rule:
button {
-webkit-font-smoothing: inherit;
}
Now, the button element should inherit whatever values you've set it to.
You may also want to run some other tests to see if any other elements also exhibit the same behaviour.
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
