Font looses subpixel antialiasing if rounded border and overflow styles applied to element

[median tapir]

Font looses subpixel antialiasing if rounded border and overflow styles applied to element (only Ubuntu)

Faced this interesting bug (probably from webkitgtk), if you apply both styles "rounded border and overflow hidded", font looses its subpixel-aa and uses grayscale AA, which is visually noticable, tested on Ubuntu 20.04.5 LTS (Windows is ok):

<style>
  .rrr {
    border-radius: 0.5rem;
  }

  .hhh {
    overflow: hidden;
  }
</style>

<div class="mx-8 mt-8">aaa bbb ccc jjj qqq</div>
<div class="mx-8 mb-8 mb-1 border rrr hhh">
  rounded, overflow-hidden | aaa bbb ccc jjj qqq
</div>

renders as:

[quartz badger]

Have you tried

font-smooth: always;
text-rendering: optimizeLegibility;

[median tapir]

@quartz badger font-smooth reported as unsuported, but there is also -webkit-font-smoothing but which has no effect too:

.fff {
    font-smooth: always;
    -webkit-font-smoothing: subpixel-antialiased;
    text-rendering: optimizeLegibility;
}

[quartz badger]

Hmmmm, I don't remember all the magic CSS values you can use to make font rendering better 🤔 Doesn't help either that there's like 4 different browser specific values you gotta remember >.< What I can say though is that I've always had issues with webkit2gtk in terms of rendering, it does the weirdest things sometimes and it just never quite looks the same as it does on firefox or chrome