Blurry text after using CSS transform: scale(); in Chrome

Question

Seems like there has been a recent update to Google Chrome that causes blurry text after doing a transform: scale(). Specifically I'm doing this:

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(.3);
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
  }

  70% {
    -webkit-transform: scale(.9);
  }

  100% {
    -webkit-transform: scale(1);
  }
}

If you visit http://rourkery.com in Chrome, you should see the problem on the main text area. It didn't used to do this and it doesn't seem to effect other webkit browsers (like Safari). There were some other posts about people experiencing a similar issue with 3d transforms, but can't find anything about 2d transforms like this.

Any ideas would be appreciated, thanks!

Kanpur

Just visited the site using Firefox and IE 10, don't see the problem. If it's limited to Chrome, you might need to wait for Google to fix it themselves. – Dwell

I've come across this problem earlier too, as Nolonar mentioned we'll have to wait for Google to fix it. – Cullum

Not a solution, but I have noticed that the issue only occurs for me when I use CSS optimizeLegibility. – Drake

Link is broken. – Celestyna

html5rocks.com/en/tutorials/internals/antialiasing-101 Anyone who suffers from blurry text should read this old article by Paul Lewis. In short it's mainly all about Subpixel antialiasing quirks. – Scherle

Answer 1

I have had this problem a number of times and there seems to be 2 ways of fixing it (shown below). You can use either of these properties to fix the rendering, or both at the same time.

Backface visibility hidden fixes the problem as it simplifies the animation to just the front of the object, whereas the default state is the front and the back.

backface-visibility: hidden;

TranslateZ also works as it is a hack to add hardware acceleration to the animation.

transform: translateZ(0);

Both of these properties fix the problem that you are having but some people also like to add

-webkit-font-smoothing: subpixel-antialiased;

to their animated object. I find that it can change the rendering of a web font but feel free to experiment with that method too.

Burt

These techniques all seem to improve things, but I still can't get Chrome to the same level of clarity that I see in Firefox. – Cavill

backface-visibility: hidden; sure worked in my case, in solving some weird blurry movement cause by opacity transition, that is. The weird movement is now gone, BUT it has made the texts in my div permanently blurred instead. – Chambless

As @ykadaru suggested, try adding perspective(1px) to your transform: code, this worked for me in Chrome while nothing else solved the problem – Grangerize

Does not work on Chrome Version 65.0.3325.162 (Official Build) (64-bit) running in Ubuntu 17.10 with Gnome X11 session (Wayland off) – Britteny

In Chrome 72 the first two options cause the text to be blurry during & at the end of the transform – Garniture

IN my case backface-visibility: visible; helped to save the blurred text :) – Sigismund

I've been experiencing other bugs (like partially changed opacity for rgba values) caused by scale() and backface-visibility: hidden; fixed them--blurry text isn't the only weird thing that happens. I have only experienced these bugs in Chromium browsers. – Candelabra

I'm using a transition with opacity and scale on a parent element. During the transition the text was blurry and when finished it jumped a few pixels. By adding backface-visibility: hidden; on the element that jumped, it was solved. Used chrome 77.0.3865.90 on Windows. – Zobkiw

For future developers, please tread carefully using any of these. My web app's FPS dropped from +60 to under 38 the moment I enabled this thing. (I have tons of text over many scrollable elements). Basically, your animations are gonna look very sluggish, so unless your web app is running natively with its own chromium rendering engine without browser, don't use it most of the time; might not be worth it. Maybe try looking into changing the colors of your text or background or some other design choices that might have caused the issue in the first place. Make it a last resort. – Kirstiekirstin

Answer 2

After trying everything else here with no luck, what finally fixed this issue for me was removing the will-change: transform; property. For some reason it caused horribly blurry looking scaling in Chrome, but not Firefox.

Vertebral

Why would anyone downvote this? I don't get it... :( This is a completely valid issue in some versions of chrome, and it seems "will-change" in general is still pretty new and probably shouldn't be used. For more info see greensock.com/will-change – Vertebral

Had the same issue. Thanks for posting. – Aestheticism

I had the same issue with material-design-components rendering on Chrome 75. Removing the "will-changed" css style fixed it. – Inventory

Confirmed in Chrome 79 – Dicot

I have the opposite, adding will-change: transform; slightly fixes the issue – Johanajohanan

Worked for me on Chrome 80, unlike other fixes. Now it's only blurry during the transition animation, which is a different issue, I guess. Thanks! – Sumbawa

This fixed it for me on Chrome 86 – Wallasey

This is very odd. As the workarounds in the solution doesn't work for my simple keyframe animation, this actually resolved the blurry result. ``` @keyframes heart-pulse { from { transform: scale(0); opacity: 1; } 25% { transform: scale(1.15); } 50% { transform: scale(1); } 75% { transform: scale(1.15); } to { transform: scale(1); opacity: 1; } } ``` – Motherly

This worked for me! However, it led to major performance reductions when lots of content was in the scroll-view. I eventually found a solution using the following answer (on another question), which works nicely for this as well (triggers a re-rasterization by briefly setting display = "none" then resetting to display = ""): stackoverflow.com/a/41426352 – Prolate

Answer 3

To improve the blurriness, esp. on Chrome, try doing this:

transform: perspective(1px) translateZ(0);
backface-visibility: hidden;

Perspective adds distance between the user and the z-plane, which technically scales the object, making the blurriness seem 'permanent'. The perspective(1px) above is like duck-tape because we're matching the blurriness we're trying to solve. You might have better luck with the css below:

transform: translateZ(0);
backface-visibility: hidden;

Croak

For me, this actually makes it worse. – Crater

For me this fixes the glitch (without this, the element moves 1px after animation is done, transform: perspective(1px) alone fix this!) – Fillister

@Crater check my updated answer! get rid of the perspective(1px) property and see if it works better. – Croak

You answered with exactly the same question code. – Unhappy

Answer 4

I found that adjusting the scale ratio helped slightly.

Using scale(1.048) over (1.05) seemed to generate a better approximation to a whole-pixel font size, reducing the sub-pixel blurring.

I also used translateZ(0) which seems to adjust Chrome's final rounding step in the transform animation. This is a plus for my onhover usage because it increases speed and reduces visual noise. For an onclick function however, I wouldn't use it because, the transformed font doesn't appear to be as crispy.

Builder

That's the only approach that worked for me. The other approaches (backface-visibility, adding filters, perspective and good old translateZ) just made it worse. Try scaling to whole pixels. For example go from 14px to 16px using a scale factor of 1,1429 (16/14). – Wenoa

Worked for me without translateZ(0), changed just 1.05 to 1.048 – Letdown

Answer 5

Instead of

transform: scale(1.5);

using

zoom : 150%;

fixes the text blurring problem in Chrome.

Shool

It can help but also introduces other issues, like white border lines being introduced sometimes – Bleeder

Exactly. But I found no other method that could remove text-blur problem in Chrome. So, I've been using zoom for my website. Can't understand the downvotes though! – Shool

not sure why the downvote. When I applied this to checkboxes this worked much better than transform: scale() – Tungting

For firefox, use transform: scale() works like charm without any blurriness. You'll have to work on browser detection and act accordingly for chrome/safari and firefox. – Shool

Another issue is that zoom doesn't seem to work with the transition property, so it can't be used for CSS animations – Baeza

It works and fox the blur thing, but it also changes position of elements. – Shaefer

@Shaefer : yes it does, that would anyway be happening even when you're doing transform: scale({scaleVal});, you will need to position your elements left/top accordingly which is an easy calculation based on {scaleVal} – Shool

Not supported by any version of FF! So you probably don't want to use it. – Abject

This is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future. – Seabury

It is not advisable to use zoom property just yet. According to MDN, it is a Non-standard CSS property. Read more here: developer.mozilla.org/en-US/docs/Web/CSS/zoom – Incongruous

Answer 6

This must be a bug with Chrome (Version 56.0.2924.87), but the below fixes the bluriness for me when changing css properties in the console('.0'). I'll report it.

filter: blur(.0px)

Linn

Did you get anywhere with your bug report? – Temptress

afraid I don't even recall where I submitted the bug to. Did so though. – Linn

I'm using Bootstrap (4.4.1), Chrome (80.0.3987.132), Windows 10 (with view 125% scaled up) and I have blurry texts in dropdown menu. The menu is positioned using transform: translate3d(); and this seems to cause the problem. None of the suggested solutions worked for me. Except/kinda this one. This works only if I set it first to some positive value (e.g., blur(0.1px)) and then change to blur(0px). Since the element is dynamic, and also requires a dynamic (JS) solution, ... this sucks :\ – Cognizable

Answer 7

Sunderls lead me to the answer. Except filter: scale does not exist, but filter: blur does.

Apply the next declarations to the elements that appear blurred (in my case they were inside a transformed element):

backface-visibility: hidden;    
-webkit-filter: blur(0);

It almost worked perfectly. "Almost" because i'm using a transition and while in transition, elements don't look perfect, but once the transition is done, they do.

Akron

-webkit-filter: blur(0); alone works for me. backface-visibility: hidden; blurs my element when I reset the scaling afterwards. – Seisin

this is kinda funny for Chrome... if i set blur(0px); it doesnt fix it. but if i do blur(1px); and then press the arrow down key to blur(0px); it does look correct. Gone on page refresh / no matter what I write in the CSS – Smallage

@TomRoggero This sounds less specific to the blur property value and more about when redraw of the layout is done. You could experiment forcing redraw of the element using JavaScript after some delay. – Transpadane

-webkit-filter: blur(0); transform: perspective(1px) translateY(0) translateZ(0); those fixed my problem – Despotism

Answer 8

I have found a much better and clean solution:

.element{
 transform:scale(0.5) 
 transform-origin: 100% 0;
}

or

.element{
 transform:scale(0.5) 
 transform-origin: 0% 0;
}

Thanks to this post: Preventing blurry rendering with transform: scale

Knowhow

This 'solved' the problem in Firefox 85 on Windows and improved, but not completely solved in Chrome 88... Also, sadly, you can't really use it freely. – Selachian

Answer 9

In my case following code caused blurry font:

-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);

and just adding zoom property fixed it for me. Play around with zoom, following worked for me:

zoom: 97%;   

Ajar

No firefox support for zoom – Denims

Answer 10

I found out, that the problem occures on relative transforms in any way. translateX(50%), scale(1.1) or what ever. providing absolute values always works (does not produce blurry text(ures)).

None of the solutions mentions here worked, and I think there is not solution, yet (using Chrome 62.0.3202.94 while I am writing this).

In my case transform: translateY(-50%) translateX(-50%) causes the blur (I want to center a dialog).

To reach a bit more "absolute" values, I had to set decimal values to transform: translateY(-50.09%) translateX(-50.09%).

NOTE

I am quite sure, that this values vary on different screen sizes. I just wanted to share my experiences, in case it helps someone.

Windrow

I was running in to this exact same issue doing the exact same thing. I was centering a modal with translate3d(-50%, -50%, 0). In my case, I bumped up the values to -50.048% and it looks perfect. – Alcyone

Answer 11

2019 Update
The Chrome display bug is still unfixed and though no fault of the patrons, none of the suggestions offered in the entirety of this website help to resolve the issue. I can concur that I have tried every single one of them in vain: only 1 comes close and that's the css rule: filter:blur(0); which eliminates the shifting of a container by 1px but does not resolve the blurred display bug of the container itself and any content it may have.

Here's the reality: there literally is no fix to this problem so here is a work around for fluid websites

CASE
I'm currently developing a fluid website and have 3 divs, all centered with hover effects and sharing percentage values in both the width and position. The Chrome bug occurs on the center container which is set to left:50%; and transform:translateX(-50%); a common setting.

EXAMPLE: First the HTML...

<div id="box1" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

<div id="box2" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

<div id="box3" class="box">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

Here's the CSS where the Chrome bug occurs...

*{margin:0; padding:0; border:0; outline:0; box-sizing:border-box;  background:#505050;}
.box {position:absolute; border:1px solid #fff; border-radius:10px; width:26%; background:#8e1515; padding:25px; top:20px; font-size:12pt; color:#fff; overflow:hidden; text-align:center; transition:0.5s ease-in-out;}
.box:hover {background:#191616;}
.box:active {background:#191616;}
.box:focus {background:#191616;}
#box1 {left:5%;}
#box2 {left:50%; transform:translateX(-50%);} /* Bugged */
#box3 {right:5%;}

Here's the fixed css...

*{margin:0; padding:0; border:0; outline:0; box-sizing:border-box;  background:#505050;}
.box {position:absolute; border:1px solid #fff; border-radius:10px; width:26%; background:#8e1515; padding:25px; top:20px; font-size:12pt; color:#fff; overflow:hidden; text-align:center; transition:0.5s ease-in-out;}
.box:hover {background:#191616;}
.box:active {background:#191616;}
.box:focus {background:#191616;}
#box1 {left:5%;}
#box2 {left:37%;} /* Fixed */
#box3 {right:5%;}

Bugged fiddle: https://jsfiddle.net/m9bgrunx/2/
Fixed fiddle: https://jsfiddle.net/uoc6e2dm/2/

As you can see a small amount of tweaking to the CSS should reduce or eliminate the requirement to use transform for positioning. This could also apply to fixed width websites as well as fluid.

Furst

Blurriness is expected when using translation, because the element can end up on a half pixel. There are now better alternatives for centering things: flexbox sample, grid sample – Celestyna

The only browser I've tested which seems to have an issue with transform center is Chrome, everything else appears crystal clear. I looked back and this issue has been around for 7 years! Still there's plenty of ways to skin a cat and like you say it's not even required anymore. – Furst

this is unbelievable, but filter: blur (-0.1px); helped me !!. how the hell does this work ?? – Gallinaceous

@Gallinaceous You're forcing Chrome to render in software, which rounds to the nearest pixel. In short: don't do that. – Celestyna

Answer 12

I have this same problem. I fixed this using:

.element {
  display: table
}

Reconstruct

insane but it works; Chrome is the new IE apparently – Eyed

oooow lord! ir works! i guess table 'fix' de width in PX did not possible width with half-pixel... – Foushee

Answer 13

Another fix to try i just found for blurry transforms (translate3d, scaleX) on Chrome is to set the element as "display: inline-table;". It seems to force pixel rounding in some case (on the X axis).

I read subpixel positioning under Chrome was intended and devs won't fix it.

Bullfinch

Answer 14

Try using zoom: 101%; for complex designs when you can't use a combination of zoom + scale.

Smallage

Note that zoom is not defined by any web standard and is not supported by firefox caniuse.com/#feat=css-zoom – Aerodynamics

Answer 15

It's important to add that this issue arises if the element which is being translated has a height with an odd number of pixels. So, if you have control over the height of the element, setting it to an even number will make the content appear crisp

Carburize

I used even numbered dimensions, and the element is still blurry. – Cassandracassandre

This simply doesn't add anything to this post. – Postwar

Using even numbers didn't help with the bluriness of the animation BUT it helped with my subpixel positionning, which was another problem I had when positionning items in an infinite scroll. Thanks for the tip ! – Rescind

Answer 16

None of above worked for me. I had this animation for popups:

@keyframes pulse {
  from {
    transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}

In my case blurry effect was gone after applying this rule: -webkit-perspective: 1000; even though it is marked as unused in Chrome inspector.

Thurible

It works for me and it is also marked as unused. I have also added will-change: transform; that fixes blurry of elements borders. Any other answers didn't worked for me. – Johanajohanan

Answer 17

None of the above worked for me.

It worked when I added perspective

ie from

transform : translate3d(-10px,-20px,0) scale3d(0.7,0.7, 1)

i changed to

transform : perspective(1px) translate3d(-10px,-20px,0) scale3d(0.7,0.7, 1)

Lashaunda

Adding perspective(1px) actually made it worse for me :( – Crater

Answer 18

I used a combination of all answers and this is what worked for me in the end:

.modal .modal--transition {
  display: inline-table;
  transform: perspective(1px) scale(1) translateZ(0);
  backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
}

Misery

Answer 19

My solution was:

display: initial;

Then it was crispy sharp

Rale

Note that this won't work on span or any other inline elements. – Fear

Answer 20

I was facing the blurry text issue on Chrome but not on Firefox when I used transform: translate(-50%,-50%).

Well, I really tried a lot of workarounds like:

transform: perspective(1px);

filter: blur(0);

transform: translateZ(0);

backface-visibility: hidden;

None of these worked to me.

Finally, I made the height and width of the element even. It resolved the issue for me!!!

Note: It might depend from use case to use case. But surely worth a try!

Trilley

Yes, using width:0 and height:0, and animating with transition : width .15s, height.15s (instead of transform:scale(0) and transition:transform .15s) does the job, but you lose the transform origin (may be I can hack this by animating margin), and it is a little bit janky (I can see 2-3 intermediate frames) – Rescind

You should use backface-visibility: hidden; AND transform: translateZ(0); . Z transform tells the engine to use 3D rendering. Until that, backface-visibility has no effect. – Everything

Answer 21

I have tried a lot of examples from these answers unfortunately nothing help for Chrome Version 81.0.4044.138 I have added to transforming element instead

 transform-origin: 50% 50%;

this one

 transform-origin: 51% 51%;

it helps for me

Elmerelmina

Answer 22

This is what worked for me:

body { perspective: 1px; }

Ruck

Answer 23

I fixed my case by adding:

transform: perspective(-1px)

Gelasius

This for me just removed the scale() transform result – Diuretic

Answer 24

I removed this from my code - transform-style: preserve-3d; and added this- transform: perspective(1px) translateZ(0);

the blur went away!

Gob

Answer 25

FOR CHORME:

I´ve tried all suggestions here. But diden't work. My college found a great solution, that works better:

You should NOT scale past 1.0

And include translateZ(0) in the hover but NOT in the none-hover/initial position.

Example:

a {
    transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
    transform: scale(0.8, 0.8);
}

a:hover {
    transform: translateZ(0)scale(1.0, 1.0);
}

Turnspit

Now for me it starts blurry and goes to clear. – Expeditious

Answer 26

In Chrome 74.0.3729.169, current as of 5-25-19, there doesn't seem to be any fix for blurring occurring at certain browser zoom levels caused by the transform. Even a simple TransformY(50px) will blur the element. This doesn't occur in current versions of Firefox, Edge or Safari, and it doesn't seem to occur at all zoom levels.

Levator

This is what happened to my. I can't get rid of this blur effect. One solution which have worked is to set these properties: top: 0, bottom: 0, left: 0; right: 0; margin: auto but then the container will take the whole space it can (it must be width), so this doesn't work in case when the content should decide how big container will be. – Quilting

Answer 27

So. I tried all the solutions above and nothing really worked. But!

I have a modal-root div in my index.html of my React App. I am rendering a Modal component (.modal) in it if it is necessary. First I positioned the modal itself fixed, making it top-left 50% and applied a transition(-50%, -50%) to get it centered.

I zoomed in-and-out and noticed the blurriness of the modal content if the zoom ratio of the Chrome browser was not 100%. It could be 110% or 90-80-75 etc. percent, doesn't matter. Apart from 100% zoom it was really blurry and ugly.

So I decided to get rid of the entire transition-based solution that I had before to center the child of the .modal element.

I am positioning my modal-root fixed, making it top-left-right-bottom 0, so it is always 100vh and wv. Then I made it a flex-container and positioned its child via align-items and justify-content centered.

But! There is always a but. The modal-root has a z-index: -1 on default. I decided to change it programmatically to 59 if the modal is opened. I also apply an overlay that makes the rest of the page darker, that is the .overlay which has a z-index of 60. The actual modal content (.modal) has a z-index of 61.

I also wanted to animate the entrance of that element when it appears so I am playing around with the margins, instead of applying any kind of transition to it. It's a cubic-bazier animation that handles that margin-top at the fitting percent within the animation but at the end it is margin-top 0 with no transition property.

It was a bit pity to have to rework the component but after testing it it works pretty fine.

Summary:

• Highest parent container fixed, covering the entire page
• Setting the highest parentcontainer's z-index -1 or [custom-value] depending on wanting to interacting with the modal (modal is open)
• Setting the container's z-index to -1 if the modal is closed
• Making the container a flex-container and position its child to the center
• Animating the child via margin values instead of transition

I hope it can be helpful for some of you folks :)

Measured

Answer 28

I have a div that has a small perspective shift on it to give a subtle 3D effect. The text in the div was blurring and I tried all the suggestions here to no avail.

Oddly, I found that setting 'filter: inherit;' on the text elements vastly improved the clarity. Though I can't understand why.

Here's my code in case it helps:

Html:

<div id="NavContainer">
    <div id="Nav">
        <label>Title</label>
        <nav>
            <a href="/">home</a>
            <a href="/link1">link1</a>
            <a href="/link2">link2</a>
        </nav>
    </div>
</div>

Css:

    #NavContainer {
        position: absolute;
        z-index: 1;
        top: 0;
        left: 20px;
        right: 20px;
        perspective: 80vw;
        perspective-origin: top center;
    }

    #Nav {
        text-align: right;
        transform: rotateX(-5deg);
    }

        #Nav > nav > a,
        #Nav > label {
            display: inline-block;
            filter: inherit;
        }

        #Nav > label {
            float: left;
            font-weight: bold;
        }

Paapanen

Answer 29

For me the problem was that my elements were using transformStyle: preserve-3d. I realized that this wasn't actually needed for the app and removing it fixed the blurriness.

Educate

Answer 30

It will be difficult to solve with only css.

So I solved it with jquery.

This is my CSS.

.trY {
   top: 50%;
   transform: translateY(-50%);
}

.trX {
   left: 50%;
   transform: translateX(-50%);
}

.trXY {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

and this is my jquery.

function tr_init() {
$(".trY, .trX, .trXY").each(function () {
    if ($(this).outerWidth() % 2 != 0) {
        var fixed_width = Math.ceil($(this).outerWidth() / 2) * 2;
        $(this).css("width", fixed_width);
    }
    if ($(this).outerHeight() % 2 != 0) {
        var fixed_height = Math.ceil($(this).outerHeight() / 2) * 2;
        $(this).css("height", fixed_height);
    }
})}

Concurrent

Answer 31

Just to add to the fix craze, putting {border:1px solid #???} around the badly looking object fixes the issue for me. In case you have a stable background colour, consider this too. This is so dumb noone thought about mentioning I guess, eh eh.

Tremann

This did not make a difference for me – Fear

Answer 32

In my case, the mistake was that the animation was set to a parent div of the animated element (an SVG). The parent div had some crazy width, like 466.667px. Setting that to an odd number wouldn't help. But: targetting the SVG itself with the animation (instead of the parent container did).

Lester

Answer 33

For anyone reading in the future: In my case the issue was that I added:

perspective: 2500px;

To a parent element. Removing this property resolved the issue.

Glandulous

Answer 34

Try to play with zoom value on the animated block. In my case, zoom: 99.6%; totally fixes the blurry text. But for example, with 99.7% value text is still blurry, so in each case this value can vary.

Jarvey

Answer 35

What worked for me was to remove backdrop-filter: blur(8px);. While this filter was only being applied to the background of a <div>, and not to its text, it seems like merely the presence of this property causes Chrome to slightly blur the text when used with transform: scale();.

Underhung

Answer 36

I was using box-shadow on my card and that is why it was causing me trouble after removing that box-shadow i was able to see crisp text after scaling.

Adiana

Answer 37

Try adding this rule seperately to transformed element. both are working:

border:0 !important;
or 
border-radius:0 !important;

During

Answer 38

For me, my solution had a bit of luck involved. My solution only works in certain scenarios. My browser is chrome 120.0.6099.110. I solved this problem by adding

content-visable:auto 

to the text wrapping layer. I have tried all the above-mentioned upvoted answers, but to no avail. My interface is a table. For product comparison, the transform:scaleY(-1) element needs to be flipped and reduced in the vertical direction, that is, upside down. When there are more than 8 products compared, the DOM content of the page will be very large, with many columns and rows of data, then there will be problems with Chrome rendering, and the problem of blurred fonts will occur. By adding content-visable:auto, the browser will reduce some rendering content, this is my understanding. I have a horizontal scroll bar to drag and display all the content, because one screen cannot display everything. No problem dragging, great content-viable

Labile

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Burra

Answer 39

highest rated solution works but not for <h1...6> tags, had to specify font-size for them to work.

Doug

Answer 40

you can use css filter to fix this.

.element {
    filter: blur(0);
}

about vendor-prefix, please do it by yourself.-webkit-filter,-ms-filter. detail is here http://browser.colla.me/show/css_transformation_scale_cause_blurring

Kimsey

There is no filter: scale according to developer.mozilla.org/en/docs/Web/CSS/filter – Mismatch

It should be blur according to the referenced URL in the answer. – Lenticularis