Home/ Questions/Q 8920073
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T06:10:27+00:00

I have used this snippet to prevent webkit from changing antialiasing when using CSS

  • 0

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:

enter image description here

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0