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

User · Answer

I have have 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 to object. I find that it can change the rendering of a web font but feel free to experiment with that method too.

User · Answer

My solution was   display  initial   Then it was crispy sharp

User · Answer

Instead of   transform  scale 1 5     using   zoom   150     fixes the text blurring problem in Chrome

User · Answer

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

User · Answer

To improve the blurriness  esp  on Chrome  try doing this   transform  perspective 1px  translateZ 0   backface-visibility  hidden    UPDATE  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

User · Answer

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

User · Answer

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

User · Answer

2019 UpdateThe 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      lt div id  box1  class  box  gt      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   lt  div gt    lt div id  box2  class  box  gt      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   lt  div gt    lt div id  box3  class  box  gt      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   lt  div gt    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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

I have this same problem  I fixed this using    element     display  table

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

I fixed my case by adding   transform  perspective -1px

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

I removed this from my code -  transform-style  preserve-3d  and added this- transform  perspective 1px  translateZ 0    the blur went away

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Try using zoom  101   for complex designs when you can t use a combination of zoom   scale

[google-chrome] Blurry text after using CSS transform: scale(); in Chrome

Examples related to google-chrome

Examples related to css

Examples related to webkit

Examples related to transform

Examples related to css-animations