2

I have the following page: fiddle. As it stands, Chrome (47.0.2526.106 m) renders the fixed header text using gray-scale anti-aliasing:

enter image description here

While I want to maintain the "default" anti-aliasing you get without using any kind of 3D transforms:

enter image description here

In the linked fiddle, this is possible using these options:

  • Removing transform: perspective(900px) rotateY(-30deg); from .img
  • Removing z-index: 999; from the #header (for whatever reason this does not work in fiddle, so you have to show it in a dedicated browser tab using the copy-pasta code below)
  • Removing position: fixed; from the #header (also does not work in fiddle)

However, all these options have a huge visual impact on other parts of the page which I want to avoid. So my question is, how can I keep the "default" anti-aliasing (whatever the proper term for this type of AA is), while also being able to use z-index/fixed position/rotateY?

HTML:

<div id="header">
  blah BLAH blah
</div>

<div class="img"></div>

CSS:

#header {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 999;
    background: #ccc;
    box-shadow: 0 0 1em 0 #000;
    text-align: center;
}

.img {
    width: 200px;
    height: 200px;
    transform: perspective(900px) rotateY(-30deg);
    background: black;
}

.html file (for the z-index/position trick)

<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            #header {
                width: 100%;
                position: fixed;
                top: 0;
                z-index: 999;
                background: #ccc;
                box-shadow: 0 0 1em 0 #000;
                text-align: center;
            }

            .img {
                width: 200px;
                height: 200px;
                transform: perspective(900px) rotateY(-30deg);
                background: black;
            }
        </style>
    </head>

    <body>
        <div id="header">
          blah BLAH blah
        </div>

        <div class="img"></div>
    </body>
</html>
Paya
  • 5,124
  • 4
  • 45
  • 71
  • I have to ask... Why does sub-pixel font rendering matter so much to you? – Niet the Dark Absol Dec 30 '15 at 16:02
  • 1
    @NiettheDarkAbsol Because the text looks blurry on my monitor without it. [see for yourself](http://s28.postimg.org/exk82ymfd/blurry_text.png) – Paya Dec 30 '15 at 16:30
  • 1
    *possible* duplicate: http://stackoverflow.com/questions/17867574/chrome-not-antialiasing-text – CodeLikeBeaker Dec 30 '15 at 17:05
  • 1
    @JasonHeine How is this a duplicate? The linked issue has been fixed since Chrome 37, while my bug is still very much present in Chrome 47. Furthermore, my issue explicitly mentions 3D rendering as the culprit, which the linked post does not mention at all. – Paya Dec 31 '15 at 09:29
  • @Paya which is why I had italicized *possible*. Just being helpful man :) – CodeLikeBeaker Dec 31 '15 at 13:25
  • This link isn't an answer to this question, but it helped with what I was trying to achieve (proper subpixel antialiasing on a canvas element) https://stackoverflow.com/a/28161474 – Nnnes Feb 05 '23 at 04:27

0 Answers0