1

Problem

Text is displayed imperfectly, when -webkit-background-clip: text is used.

Screenshot

The first four words are too thin.

Code

body {
  background: black !important;
  color: white;
  font-family: Roboto;
  font-weight: 200;
}

span {
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent;
  background: white;
}
<span>The first four words</span> are too thin.

Important

  1. The perceived attributes should not be changed by the solution. (I.e. black background, white text, thin font etc.)

  2. The solution should work well in other cases too. (E.g. red background, blue text, thick font etc.)

  3. There should be no side-effects. (E.g text becoming blurry or too thick etc.)

Approach Problem
increase font-weight Makes the text blurry. filter: custom(…)
add -webkit-text-stroke Makes the text too thick. semi-transparency
add text-shadow Makes the text blurry. multiple shadows
increase font-size Should look the same. transform: scale(0.5)
change the font-family Should look the same. src: url(Roboto.svg)
change the background-color Should look the same. rgba(0, 0, 0, 1)
change the color Should look the same. filter: saturate(0)
-webkit-font-smoothing: antialiased Useless. -
text-rendering: optimizeLegibility Useless. -
transform: translate3d(0, 0, 0) Useless. -
bug report (find&vote, or create) Not an instant solution. draw attention

Goal

To fix the -webkit-background-clip: text, preferably by adding a simple CSS declaration.
(JavaScript or other approaches might be useable as well.)

Tamás Bolvári
  • 2,976
  • 6
  • 34
  • 57
  • Should it be reported at [bugs.chromium.org](https://bugs.chromium.org/p/chromium/issues/entry)? – Tamás Bolvári Jan 19 '21 at 17:09
  • i do not think so, because the bug occurs on other browsers as well –  Jan 19 '21 at 17:46
  • this isn't a bug, coloring text using background is not the same algorithm as with using color – Temani Afif Jan 19 '21 at 19:41
  • @HaveProblemsEveryday: You are right. (I've tested now in Edge.) All the WebKit based browsers are affected, I guess. Should it be reported at [webkit.org](https://webkit.org/reporting-bugs/), then? – Tamás Bolvári Jan 20 '21 at 06:23
  • @TemaniAfif: Not the same algorithm, that's true. What if a new JavaScript engine used a different algorithm to calculate `2 + 2`, and the result was `5`? Would that be a bug? Not the same algorithm, that's true. But is the result incorrect? Both of the CSS methods above ask for the same result: display the text as white, thin Roboto. The WebKit declaration has an unwanted side-effect, do you agree? – Tamás Bolvári Jan 20 '21 at 06:37
  • (This quote from [/a/7938200/1293492](https://stackoverflow.com/a/7938200/1293492) might be relevant: "Perhaps someone should recommend that the W3C add **background-clip: reverse-text**, that would cut a mask through the background instead of cutting the background to fit inside the text.") – Tamás Bolvári Jan 20 '21 at 07:17
  • not the same algorithm AND not the same result. I didn't say a different algorithm for the same resutl. – Temani Afif Jan 20 '21 at 07:58
  • @TemaniAfif Should the result of the `background-clip` method be the same as of the `color` method? – Tamás Bolvári Jan 20 '21 at 09:52

0 Answers0