Chrome Font appears Blurry











up vote
36
down vote

favorite
14












It's doing my eyes in!



looks fine in IE and Firefox



enter image description here



Chrome(Above)



Running version 39 of chrome,
only appears blurry in a modal box, does not make any difference if I change the font family.



This is the CSS (for label "Start") the browser renders the following



box-sizing: border-box;
color: rgb(85, 85, 85);
cursor: default;
display: block;
float: left;
font-family: sans-serif;
font-size: 12px;
font-weight: 600;
height: 24px;
line-height: 17.142858505249px;
margin-bottom: 0px;
margin-top: 0px;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
padding-top: 7px;
position: relative;
text-align: right;
visibility: visible;
width: 89.65625px;


Is it the browser or CSS?



--UPDATE---



Ok looks like its this CSS



.md-modal {
position: fixed;
top: 50%;
left: 50%;
width: 50%;
max-width: 630px;
min-width: 320px;
height: auto !important;
z-index: 2000;
visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateX(-50%) translateY(-50%); <--- This line
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}


However if I take it out my modal no longer centres?










share|improve this question
























  • Are there any CSS transforms on any of the parent elements? It looks like it's being positioned on a decimal of a pixel.
    – BurpmanJunior
    Dec 9 '14 at 17:35






  • 3




    Can you paste your markup into a JSFiddle or something, to see if it replicates there? The styles alone do not allow me to reproduce this
    – David Lerner
    Dec 9 '14 at 17:37












  • You could try something like -webkit-font-smoothing: none;
    – Chad
    Dec 9 '14 at 17:48










  • @BurpmanJunior Hey, not being a CSS expert what am I am looking for?
    – D-W
    Dec 10 '14 at 10:15










  • Hey updated the main post
    – D-W
    Dec 10 '14 at 10:30















up vote
36
down vote

favorite
14












It's doing my eyes in!



looks fine in IE and Firefox



enter image description here



Chrome(Above)



Running version 39 of chrome,
only appears blurry in a modal box, does not make any difference if I change the font family.



This is the CSS (for label "Start") the browser renders the following



box-sizing: border-box;
color: rgb(85, 85, 85);
cursor: default;
display: block;
float: left;
font-family: sans-serif;
font-size: 12px;
font-weight: 600;
height: 24px;
line-height: 17.142858505249px;
margin-bottom: 0px;
margin-top: 0px;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
padding-top: 7px;
position: relative;
text-align: right;
visibility: visible;
width: 89.65625px;


Is it the browser or CSS?



--UPDATE---



Ok looks like its this CSS



.md-modal {
position: fixed;
top: 50%;
left: 50%;
width: 50%;
max-width: 630px;
min-width: 320px;
height: auto !important;
z-index: 2000;
visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateX(-50%) translateY(-50%); <--- This line
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}


However if I take it out my modal no longer centres?










share|improve this question
























  • Are there any CSS transforms on any of the parent elements? It looks like it's being positioned on a decimal of a pixel.
    – BurpmanJunior
    Dec 9 '14 at 17:35






  • 3




    Can you paste your markup into a JSFiddle or something, to see if it replicates there? The styles alone do not allow me to reproduce this
    – David Lerner
    Dec 9 '14 at 17:37












  • You could try something like -webkit-font-smoothing: none;
    – Chad
    Dec 9 '14 at 17:48










  • @BurpmanJunior Hey, not being a CSS expert what am I am looking for?
    – D-W
    Dec 10 '14 at 10:15










  • Hey updated the main post
    – D-W
    Dec 10 '14 at 10:30













up vote
36
down vote

favorite
14









up vote
36
down vote

favorite
14






14





It's doing my eyes in!



looks fine in IE and Firefox



enter image description here



Chrome(Above)



Running version 39 of chrome,
only appears blurry in a modal box, does not make any difference if I change the font family.



This is the CSS (for label "Start") the browser renders the following



box-sizing: border-box;
color: rgb(85, 85, 85);
cursor: default;
display: block;
float: left;
font-family: sans-serif;
font-size: 12px;
font-weight: 600;
height: 24px;
line-height: 17.142858505249px;
margin-bottom: 0px;
margin-top: 0px;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
padding-top: 7px;
position: relative;
text-align: right;
visibility: visible;
width: 89.65625px;


Is it the browser or CSS?



--UPDATE---



Ok looks like its this CSS



.md-modal {
position: fixed;
top: 50%;
left: 50%;
width: 50%;
max-width: 630px;
min-width: 320px;
height: auto !important;
z-index: 2000;
visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateX(-50%) translateY(-50%); <--- This line
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}


However if I take it out my modal no longer centres?










share|improve this question















It's doing my eyes in!



looks fine in IE and Firefox



enter image description here



Chrome(Above)



Running version 39 of chrome,
only appears blurry in a modal box, does not make any difference if I change the font family.



This is the CSS (for label "Start") the browser renders the following



box-sizing: border-box;
color: rgb(85, 85, 85);
cursor: default;
display: block;
float: left;
font-family: sans-serif;
font-size: 12px;
font-weight: 600;
height: 24px;
line-height: 17.142858505249px;
margin-bottom: 0px;
margin-top: 0px;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
padding-top: 7px;
position: relative;
text-align: right;
visibility: visible;
width: 89.65625px;


Is it the browser or CSS?



--UPDATE---



Ok looks like its this CSS



.md-modal {
position: fixed;
top: 50%;
left: 50%;
width: 50%;
max-width: 630px;
min-width: 320px;
height: auto !important;
z-index: 2000;
visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateX(-50%) translateY(-50%); <--- This line
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}


However if I take it out my modal no longer centres?







css google-chrome






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Dec 10 '14 at 10:30

























asked Dec 9 '14 at 17:31









D-W

1,94193256




1,94193256












  • Are there any CSS transforms on any of the parent elements? It looks like it's being positioned on a decimal of a pixel.
    – BurpmanJunior
    Dec 9 '14 at 17:35






  • 3




    Can you paste your markup into a JSFiddle or something, to see if it replicates there? The styles alone do not allow me to reproduce this
    – David Lerner
    Dec 9 '14 at 17:37












  • You could try something like -webkit-font-smoothing: none;
    – Chad
    Dec 9 '14 at 17:48










  • @BurpmanJunior Hey, not being a CSS expert what am I am looking for?
    – D-W
    Dec 10 '14 at 10:15










  • Hey updated the main post
    – D-W
    Dec 10 '14 at 10:30


















  • Are there any CSS transforms on any of the parent elements? It looks like it's being positioned on a decimal of a pixel.
    – BurpmanJunior
    Dec 9 '14 at 17:35






  • 3




    Can you paste your markup into a JSFiddle or something, to see if it replicates there? The styles alone do not allow me to reproduce this
    – David Lerner
    Dec 9 '14 at 17:37












  • You could try something like -webkit-font-smoothing: none;
    – Chad
    Dec 9 '14 at 17:48










  • @BurpmanJunior Hey, not being a CSS expert what am I am looking for?
    – D-W
    Dec 10 '14 at 10:15










  • Hey updated the main post
    – D-W
    Dec 10 '14 at 10:30
















Are there any CSS transforms on any of the parent elements? It looks like it's being positioned on a decimal of a pixel.
– BurpmanJunior
Dec 9 '14 at 17:35




Are there any CSS transforms on any of the parent elements? It looks like it's being positioned on a decimal of a pixel.
– BurpmanJunior
Dec 9 '14 at 17:35




3




3




Can you paste your markup into a JSFiddle or something, to see if it replicates there? The styles alone do not allow me to reproduce this
– David Lerner
Dec 9 '14 at 17:37






Can you paste your markup into a JSFiddle or something, to see if it replicates there? The styles alone do not allow me to reproduce this
– David Lerner
Dec 9 '14 at 17:37














You could try something like -webkit-font-smoothing: none;
– Chad
Dec 9 '14 at 17:48




You could try something like -webkit-font-smoothing: none;
– Chad
Dec 9 '14 at 17:48












@BurpmanJunior Hey, not being a CSS expert what am I am looking for?
– D-W
Dec 10 '14 at 10:15




@BurpmanJunior Hey, not being a CSS expert what am I am looking for?
– D-W
Dec 10 '14 at 10:15












Hey updated the main post
– D-W
Dec 10 '14 at 10:30




Hey updated the main post
– D-W
Dec 10 '14 at 10:30












10 Answers
10






active

oldest

votes

















up vote
28
down vote













I experienced the same issue on chrome after applying translate transform to one of my elements. It seems to be a bug on chrome. The only thing that worked for me was this:



#the_element_that_you_applied_translate_to {
-webkit-filter: blur(0.000001px);
}


An Other solution can be turning smooth font rendering on:



#the_element_that_you_applied_translate_to {
-webkit-font-smoothing: antialiased;
}





share|improve this answer



















  • 3




    Thank you * 100000000. I've been facing this problem for a long time with no good solution.
    – Andrew Rasmussen
    Mar 24 '16 at 23:33






  • 1




    your welcome, it's a really annoying bug.
    – Iman Mohamadi
    Mar 26 '16 at 11:25






  • 3




    excellent solution with blur .. it was only thing that really fix this. ...but from yesterday it seems like this doesn't working anymore. Problem is only with translateY() this is what causes blurry content. I found that content is blurred only if height of an element is an odd number (225px = blured, 224px = sharp as it should be ). shame that developers can't fix this for years!!! At least chrome fully support flex, if your HTML structure allows parent > child(centerend) and you don´t care about IE try this: philipwalton.github.io/solved-by-flexbox/demos/…
    – nomak22
    Aug 10 '16 at 8:37










  • I agreed with @nomak22 explanation.You can check it by changing line-height of the text.
    – Jaswinder
    Oct 27 '16 at 16:55


















up vote
21
down vote













I fixed this issue by subtracting 0.5px from the value of the Y-axis. So instead of doing:



transform: translateX(-50%) translateY(-50%);


I did this:



transform: translateX(-50%) translateY(calc(-50% - .5px));


This solved it for me and I find this a cleaner solution then fiddling around with the percentage or using Javascript.






share|improve this answer





















  • It did the trick for me too. Have tried using perspective(), with translateY(50.1%), using scale(1.0, 1.0) and others solutions.
    – Vincent
    Mar 6 '17 at 13:50






  • 2




    wow holy crap. thank you x 10000000
    – Shayan Javadi
    May 13 '17 at 4:51






  • 1




    most clutch answer I've found in some time :)
    – scniro
    Dec 1 '17 at 17:44










  • wtf! Using the calc inside translate did the trick for me, too...
    – DaFunkyAlex
    Mar 7 at 10:28






  • 1




    This still works to this day! Thank you so much!
    – Alec
    Jun 21 at 19:45


















up vote
19
down vote



+50










This fiddle tests out a few different solutions from:




  • CSS transition effect makes image blurry / moves image 1px, in Chrome?

  • WebKit: Blurry text with css scale + translate3d

  • http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/


Test Output



CSS Output



Fix 0



-webkit-transform: translateZ(0);
transform: translateZ(0);


Fix 3



-webkit-transform: translate3d(0,0,0) !important;
transform: translate3d(0,0,0) !important;





share|improve this answer



















  • 4




    Wow ... is there a reason as to why this fixes it. Or is that a feature by design.
    – Spaceman
    Sep 15 '15 at 22:46






  • 2




    I'm not clear how this fixes it, your examples are completely overriding the transform he wants. transform: translateZ(0) is the last rule applied so the X/Y translations are ignored. This fixes the blurring because the X/Y transforms are the source of the problem. For those trying to center, those x/y transforms must remain.
    – helion3
    Jul 19 '16 at 0:00






  • 1




    This is not a fix if it's exactly translate(-50%, -50%) (+ no blurry text) what one wants to achieve
    – Roko C. Buljan
    Jan 26 '17 at 16:21










  • we need a real fix, is this something for google to solve? or is this simple "impossible to fix if someone wants to use transforms" ?
    – Miguel
    Feb 15 '17 at 16:50










  • I think this answer is out of date. I no longer see this issue on the version of Chrome I am running. The issue doesn't present itself in the fiddle above.
    – JSuar
    Feb 15 '17 at 16:58




















up vote
6
down vote













The only correct way to solve this:



This problem arises from the fact of using % values to align the divs using css transforms. This results in decimals subpixel values, which your screen cannot render correctly. The solution is to normalize the resulting transformation matrix.



Might work better for fixed divs that don´t do transforming animation. But if you do animate you could use a after end callback to this function to correct the final state.



So:
matrix (1,0,0,1,-375,-451.5) would become matrix (1,0,0,1,-375,-451)



I call this method before the .show() of jquery... Or maybe just once in the application ( depends on your case) , you might need to also call this on the resize event etc..



function roundCssTransformMatrix(element){
var el = document.getElementById(element);
el.style.transform=""; //resets the redifined matrix to allow recalculation, the original style should be defined in the class not inline.
var mx = window.getComputedStyle(el, null); //gets the current computed style
mx = mx.getPropertyValue("-webkit-transform") ||
mx.getPropertyValue("-moz-transform") ||
mx.getPropertyValue("-ms-transform") ||
mx.getPropertyValue("-o-transform") ||
mx.getPropertyValue("transform") || false;
var values = mx.replace(/ |(|)|matrix/g,"").split(",");
for(var v in values) { values[v]=v>4?Math.ceil(values[v]):values[v]; }

$("#"+element).css({transform:"matrix("+values.join()+")"});

}


and call it



roundCssTransformMatrix("MyElementDivId");
$("#MyElementDivId").show();


Beautiful isn't it?



If you need to update on resize you could do it with:



$( window ).resize(function() {
roundCssTransformMatrix("MyElementDivId");
});



For this to work, all the parent must "be aligned / normalized"
because if you by instance have the body with x=10.1px left, and the
child is 10px .. the issue wont disapear because of the parent having residual decimals on their matrix
So you must apply this function to the each element that is a parent and
uses transform.




You can see this live script here: https://jsbin.com/fobana/edit?html,css,js,output






share|improve this answer























  • I was hoping for a css only solution, but this will do. I can't use any of the other suggestions on here as I'm using this css for multiple elements on the page. Some but not all elements have a round number when giving a -50% offset. So setting it to calc(-50% - .5px) would fix some elements, but break others.
    – Jespertheend
    Mar 11 at 14:37


















up vote
4
down vote













Thanks for the CSS example. It seems translateX(50%) and translateY(50%) are calculating a pixel value with a decimal place (eg, 0.5px) which causes subpixel rendering.



There are many fixes for this but if you want to retain the quality of the text, your best solution right now is to use -webkit-font-smoothing: subpixel-antialiased; on .md-modal to force the render state for webkit browsers like Chrome and Safari.






share|improve this answer

















  • 1




    Hey thanks for the reply, I added that line, but no affect im afraid
    – D-W
    Dec 11 '14 at 14:28










  • @D-W have you found a solution yet? Do you have a Codepen or jsFiddle we can look at?
    – josh1978
    Sep 4 '15 at 1:39






  • 1




    I Math.round() 'ed the translateX(x) value for my code and the rendering is now smooth. Thanks.
    – Mak
    Oct 29 '15 at 9:57






  • 2




    @mak - can you provide some more detail on exactly how you implemented your solution using Math.round() ?
    – GWR
    Jan 11 '16 at 0:39


















up vote
3
down vote













I ended up fixing this by removing these lines:



-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;





share|improve this answer




























    up vote
    2
    down vote













    For modal boxes, this css will help:



    -webkit-transform: translate3d(-50%, -51%, 0);
    -moz-transform: translate3d(-50%, -51%, 0);
    transform: translate3d(-50%, -51%, 0);


    Instead of placing Y axis at 50%, make it 51%. This helps in my cse.
    If you have a different positioning, play around, but usually 1% up/down fixes blurry content.






    share|improve this answer




























      up vote
      1
      down vote













      It took me a while to find a solution that I wouldn't bother using, so I'll post it here.



      The problem for me was that the child div had width and height properties with a combination that caused the problem.



      As I changed the height for another value, it just worked!



      This probably has to do with the other answers, but I didn't want to use any JS or change the transform property to fix it.



      Here is a live example: JSFIDDLE






      share|improve this answer





















      • I am confused as to how this works.. but thanks for sharing. I will try this.
        – captainrad
        Aug 28 '17 at 16:49


















      up vote
      0
      down vote













      Adding a CSS transition to the parent element of the parent element of my blurry element (which was using transformX which was causing blurriness) actually cancelled out the offending blurriness.






      share|improve this answer




























        up vote
        0
        down vote













        The similar issue happened for me.



        I tried with all the suggested methods none worked fine. However,finally I resolved it.
        As there is an issue with google chrome having font-weight:600 or more.
        Try changing the font-family to font-family:"Webly Sleek SemiBold","Helvetica";



        The font-weight property will work fine for it.



        Blur_Font



        Without_Blur






        share|improve this answer























          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














           

          draft saved


          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f27385126%2fchrome-font-appears-blurry%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          10 Answers
          10






          active

          oldest

          votes








          10 Answers
          10






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes








          up vote
          28
          down vote













          I experienced the same issue on chrome after applying translate transform to one of my elements. It seems to be a bug on chrome. The only thing that worked for me was this:



          #the_element_that_you_applied_translate_to {
          -webkit-filter: blur(0.000001px);
          }


          An Other solution can be turning smooth font rendering on:



          #the_element_that_you_applied_translate_to {
          -webkit-font-smoothing: antialiased;
          }





          share|improve this answer



















          • 3




            Thank you * 100000000. I've been facing this problem for a long time with no good solution.
            – Andrew Rasmussen
            Mar 24 '16 at 23:33






          • 1




            your welcome, it's a really annoying bug.
            – Iman Mohamadi
            Mar 26 '16 at 11:25






          • 3




            excellent solution with blur .. it was only thing that really fix this. ...but from yesterday it seems like this doesn't working anymore. Problem is only with translateY() this is what causes blurry content. I found that content is blurred only if height of an element is an odd number (225px = blured, 224px = sharp as it should be ). shame that developers can't fix this for years!!! At least chrome fully support flex, if your HTML structure allows parent > child(centerend) and you don´t care about IE try this: philipwalton.github.io/solved-by-flexbox/demos/…
            – nomak22
            Aug 10 '16 at 8:37










          • I agreed with @nomak22 explanation.You can check it by changing line-height of the text.
            – Jaswinder
            Oct 27 '16 at 16:55















          up vote
          28
          down vote













          I experienced the same issue on chrome after applying translate transform to one of my elements. It seems to be a bug on chrome. The only thing that worked for me was this:



          #the_element_that_you_applied_translate_to {
          -webkit-filter: blur(0.000001px);
          }


          An Other solution can be turning smooth font rendering on:



          #the_element_that_you_applied_translate_to {
          -webkit-font-smoothing: antialiased;
          }





          share|improve this answer



















          • 3




            Thank you * 100000000. I've been facing this problem for a long time with no good solution.
            – Andrew Rasmussen
            Mar 24 '16 at 23:33






          • 1




            your welcome, it's a really annoying bug.
            – Iman Mohamadi
            Mar 26 '16 at 11:25






          • 3




            excellent solution with blur .. it was only thing that really fix this. ...but from yesterday it seems like this doesn't working anymore. Problem is only with translateY() this is what causes blurry content. I found that content is blurred only if height of an element is an odd number (225px = blured, 224px = sharp as it should be ). shame that developers can't fix this for years!!! At least chrome fully support flex, if your HTML structure allows parent > child(centerend) and you don´t care about IE try this: philipwalton.github.io/solved-by-flexbox/demos/…
            – nomak22
            Aug 10 '16 at 8:37










          • I agreed with @nomak22 explanation.You can check it by changing line-height of the text.
            – Jaswinder
            Oct 27 '16 at 16:55













          up vote
          28
          down vote










          up vote
          28
          down vote









          I experienced the same issue on chrome after applying translate transform to one of my elements. It seems to be a bug on chrome. The only thing that worked for me was this:



          #the_element_that_you_applied_translate_to {
          -webkit-filter: blur(0.000001px);
          }


          An Other solution can be turning smooth font rendering on:



          #the_element_that_you_applied_translate_to {
          -webkit-font-smoothing: antialiased;
          }





          share|improve this answer














          I experienced the same issue on chrome after applying translate transform to one of my elements. It seems to be a bug on chrome. The only thing that worked for me was this:



          #the_element_that_you_applied_translate_to {
          -webkit-filter: blur(0.000001px);
          }


          An Other solution can be turning smooth font rendering on:



          #the_element_that_you_applied_translate_to {
          -webkit-font-smoothing: antialiased;
          }






          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Jul 10 '16 at 9:07









          Mosh Feu

          15.3k104681




          15.3k104681










          answered Mar 12 '16 at 7:40









          Iman Mohamadi

          3,0172427




          3,0172427








          • 3




            Thank you * 100000000. I've been facing this problem for a long time with no good solution.
            – Andrew Rasmussen
            Mar 24 '16 at 23:33






          • 1




            your welcome, it's a really annoying bug.
            – Iman Mohamadi
            Mar 26 '16 at 11:25






          • 3




            excellent solution with blur .. it was only thing that really fix this. ...but from yesterday it seems like this doesn't working anymore. Problem is only with translateY() this is what causes blurry content. I found that content is blurred only if height of an element is an odd number (225px = blured, 224px = sharp as it should be ). shame that developers can't fix this for years!!! At least chrome fully support flex, if your HTML structure allows parent > child(centerend) and you don´t care about IE try this: philipwalton.github.io/solved-by-flexbox/demos/…
            – nomak22
            Aug 10 '16 at 8:37










          • I agreed with @nomak22 explanation.You can check it by changing line-height of the text.
            – Jaswinder
            Oct 27 '16 at 16:55














          • 3




            Thank you * 100000000. I've been facing this problem for a long time with no good solution.
            – Andrew Rasmussen
            Mar 24 '16 at 23:33






          • 1




            your welcome, it's a really annoying bug.
            – Iman Mohamadi
            Mar 26 '16 at 11:25






          • 3




            excellent solution with blur .. it was only thing that really fix this. ...but from yesterday it seems like this doesn't working anymore. Problem is only with translateY() this is what causes blurry content. I found that content is blurred only if height of an element is an odd number (225px = blured, 224px = sharp as it should be ). shame that developers can't fix this for years!!! At least chrome fully support flex, if your HTML structure allows parent > child(centerend) and you don´t care about IE try this: philipwalton.github.io/solved-by-flexbox/demos/…
            – nomak22
            Aug 10 '16 at 8:37










          • I agreed with @nomak22 explanation.You can check it by changing line-height of the text.
            – Jaswinder
            Oct 27 '16 at 16:55








          3




          3




          Thank you * 100000000. I've been facing this problem for a long time with no good solution.
          – Andrew Rasmussen
          Mar 24 '16 at 23:33




          Thank you * 100000000. I've been facing this problem for a long time with no good solution.
          – Andrew Rasmussen
          Mar 24 '16 at 23:33




          1




          1




          your welcome, it's a really annoying bug.
          – Iman Mohamadi
          Mar 26 '16 at 11:25




          your welcome, it's a really annoying bug.
          – Iman Mohamadi
          Mar 26 '16 at 11:25




          3




          3




          excellent solution with blur .. it was only thing that really fix this. ...but from yesterday it seems like this doesn't working anymore. Problem is only with translateY() this is what causes blurry content. I found that content is blurred only if height of an element is an odd number (225px = blured, 224px = sharp as it should be ). shame that developers can't fix this for years!!! At least chrome fully support flex, if your HTML structure allows parent > child(centerend) and you don´t care about IE try this: philipwalton.github.io/solved-by-flexbox/demos/…
          – nomak22
          Aug 10 '16 at 8:37




          excellent solution with blur .. it was only thing that really fix this. ...but from yesterday it seems like this doesn't working anymore. Problem is only with translateY() this is what causes blurry content. I found that content is blurred only if height of an element is an odd number (225px = blured, 224px = sharp as it should be ). shame that developers can't fix this for years!!! At least chrome fully support flex, if your HTML structure allows parent > child(centerend) and you don´t care about IE try this: philipwalton.github.io/solved-by-flexbox/demos/…
          – nomak22
          Aug 10 '16 at 8:37












          I agreed with @nomak22 explanation.You can check it by changing line-height of the text.
          – Jaswinder
          Oct 27 '16 at 16:55




          I agreed with @nomak22 explanation.You can check it by changing line-height of the text.
          – Jaswinder
          Oct 27 '16 at 16:55












          up vote
          21
          down vote













          I fixed this issue by subtracting 0.5px from the value of the Y-axis. So instead of doing:



          transform: translateX(-50%) translateY(-50%);


          I did this:



          transform: translateX(-50%) translateY(calc(-50% - .5px));


          This solved it for me and I find this a cleaner solution then fiddling around with the percentage or using Javascript.






          share|improve this answer





















          • It did the trick for me too. Have tried using perspective(), with translateY(50.1%), using scale(1.0, 1.0) and others solutions.
            – Vincent
            Mar 6 '17 at 13:50






          • 2




            wow holy crap. thank you x 10000000
            – Shayan Javadi
            May 13 '17 at 4:51






          • 1




            most clutch answer I've found in some time :)
            – scniro
            Dec 1 '17 at 17:44










          • wtf! Using the calc inside translate did the trick for me, too...
            – DaFunkyAlex
            Mar 7 at 10:28






          • 1




            This still works to this day! Thank you so much!
            – Alec
            Jun 21 at 19:45















          up vote
          21
          down vote













          I fixed this issue by subtracting 0.5px from the value of the Y-axis. So instead of doing:



          transform: translateX(-50%) translateY(-50%);


          I did this:



          transform: translateX(-50%) translateY(calc(-50% - .5px));


          This solved it for me and I find this a cleaner solution then fiddling around with the percentage or using Javascript.






          share|improve this answer





















          • It did the trick for me too. Have tried using perspective(), with translateY(50.1%), using scale(1.0, 1.0) and others solutions.
            – Vincent
            Mar 6 '17 at 13:50






          • 2




            wow holy crap. thank you x 10000000
            – Shayan Javadi
            May 13 '17 at 4:51






          • 1




            most clutch answer I've found in some time :)
            – scniro
            Dec 1 '17 at 17:44










          • wtf! Using the calc inside translate did the trick for me, too...
            – DaFunkyAlex
            Mar 7 at 10:28






          • 1




            This still works to this day! Thank you so much!
            – Alec
            Jun 21 at 19:45













          up vote
          21
          down vote










          up vote
          21
          down vote









          I fixed this issue by subtracting 0.5px from the value of the Y-axis. So instead of doing:



          transform: translateX(-50%) translateY(-50%);


          I did this:



          transform: translateX(-50%) translateY(calc(-50% - .5px));


          This solved it for me and I find this a cleaner solution then fiddling around with the percentage or using Javascript.






          share|improve this answer












          I fixed this issue by subtracting 0.5px from the value of the Y-axis. So instead of doing:



          transform: translateX(-50%) translateY(-50%);


          I did this:



          transform: translateX(-50%) translateY(calc(-50% - .5px));


          This solved it for me and I find this a cleaner solution then fiddling around with the percentage or using Javascript.







          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Mar 5 '17 at 20:44









          arjansmeets

          21122




          21122












          • It did the trick for me too. Have tried using perspective(), with translateY(50.1%), using scale(1.0, 1.0) and others solutions.
            – Vincent
            Mar 6 '17 at 13:50






          • 2




            wow holy crap. thank you x 10000000
            – Shayan Javadi
            May 13 '17 at 4:51






          • 1




            most clutch answer I've found in some time :)
            – scniro
            Dec 1 '17 at 17:44










          • wtf! Using the calc inside translate did the trick for me, too...
            – DaFunkyAlex
            Mar 7 at 10:28






          • 1




            This still works to this day! Thank you so much!
            – Alec
            Jun 21 at 19:45


















          • It did the trick for me too. Have tried using perspective(), with translateY(50.1%), using scale(1.0, 1.0) and others solutions.
            – Vincent
            Mar 6 '17 at 13:50






          • 2




            wow holy crap. thank you x 10000000
            – Shayan Javadi
            May 13 '17 at 4:51






          • 1




            most clutch answer I've found in some time :)
            – scniro
            Dec 1 '17 at 17:44










          • wtf! Using the calc inside translate did the trick for me, too...
            – DaFunkyAlex
            Mar 7 at 10:28






          • 1




            This still works to this day! Thank you so much!
            – Alec
            Jun 21 at 19:45
















          It did the trick for me too. Have tried using perspective(), with translateY(50.1%), using scale(1.0, 1.0) and others solutions.
          – Vincent
          Mar 6 '17 at 13:50




          It did the trick for me too. Have tried using perspective(), with translateY(50.1%), using scale(1.0, 1.0) and others solutions.
          – Vincent
          Mar 6 '17 at 13:50




          2




          2




          wow holy crap. thank you x 10000000
          – Shayan Javadi
          May 13 '17 at 4:51




          wow holy crap. thank you x 10000000
          – Shayan Javadi
          May 13 '17 at 4:51




          1




          1




          most clutch answer I've found in some time :)
          – scniro
          Dec 1 '17 at 17:44




          most clutch answer I've found in some time :)
          – scniro
          Dec 1 '17 at 17:44












          wtf! Using the calc inside translate did the trick for me, too...
          – DaFunkyAlex
          Mar 7 at 10:28




          wtf! Using the calc inside translate did the trick for me, too...
          – DaFunkyAlex
          Mar 7 at 10:28




          1




          1




          This still works to this day! Thank you so much!
          – Alec
          Jun 21 at 19:45




          This still works to this day! Thank you so much!
          – Alec
          Jun 21 at 19:45










          up vote
          19
          down vote



          +50










          This fiddle tests out a few different solutions from:




          • CSS transition effect makes image blurry / moves image 1px, in Chrome?

          • WebKit: Blurry text with css scale + translate3d

          • http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/


          Test Output



          CSS Output



          Fix 0



          -webkit-transform: translateZ(0);
          transform: translateZ(0);


          Fix 3



          -webkit-transform: translate3d(0,0,0) !important;
          transform: translate3d(0,0,0) !important;





          share|improve this answer



















          • 4




            Wow ... is there a reason as to why this fixes it. Or is that a feature by design.
            – Spaceman
            Sep 15 '15 at 22:46






          • 2




            I'm not clear how this fixes it, your examples are completely overriding the transform he wants. transform: translateZ(0) is the last rule applied so the X/Y translations are ignored. This fixes the blurring because the X/Y transforms are the source of the problem. For those trying to center, those x/y transforms must remain.
            – helion3
            Jul 19 '16 at 0:00






          • 1




            This is not a fix if it's exactly translate(-50%, -50%) (+ no blurry text) what one wants to achieve
            – Roko C. Buljan
            Jan 26 '17 at 16:21










          • we need a real fix, is this something for google to solve? or is this simple "impossible to fix if someone wants to use transforms" ?
            – Miguel
            Feb 15 '17 at 16:50










          • I think this answer is out of date. I no longer see this issue on the version of Chrome I am running. The issue doesn't present itself in the fiddle above.
            – JSuar
            Feb 15 '17 at 16:58

















          up vote
          19
          down vote



          +50










          This fiddle tests out a few different solutions from:




          • CSS transition effect makes image blurry / moves image 1px, in Chrome?

          • WebKit: Blurry text with css scale + translate3d

          • http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/


          Test Output



          CSS Output



          Fix 0



          -webkit-transform: translateZ(0);
          transform: translateZ(0);


          Fix 3



          -webkit-transform: translate3d(0,0,0) !important;
          transform: translate3d(0,0,0) !important;





          share|improve this answer



















          • 4




            Wow ... is there a reason as to why this fixes it. Or is that a feature by design.
            – Spaceman
            Sep 15 '15 at 22:46






          • 2




            I'm not clear how this fixes it, your examples are completely overriding the transform he wants. transform: translateZ(0) is the last rule applied so the X/Y translations are ignored. This fixes the blurring because the X/Y transforms are the source of the problem. For those trying to center, those x/y transforms must remain.
            – helion3
            Jul 19 '16 at 0:00






          • 1




            This is not a fix if it's exactly translate(-50%, -50%) (+ no blurry text) what one wants to achieve
            – Roko C. Buljan
            Jan 26 '17 at 16:21










          • we need a real fix, is this something for google to solve? or is this simple "impossible to fix if someone wants to use transforms" ?
            – Miguel
            Feb 15 '17 at 16:50










          • I think this answer is out of date. I no longer see this issue on the version of Chrome I am running. The issue doesn't present itself in the fiddle above.
            – JSuar
            Feb 15 '17 at 16:58















          up vote
          19
          down vote



          +50







          up vote
          19
          down vote



          +50




          +50




          This fiddle tests out a few different solutions from:




          • CSS transition effect makes image blurry / moves image 1px, in Chrome?

          • WebKit: Blurry text with css scale + translate3d

          • http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/


          Test Output



          CSS Output



          Fix 0



          -webkit-transform: translateZ(0);
          transform: translateZ(0);


          Fix 3



          -webkit-transform: translate3d(0,0,0) !important;
          transform: translate3d(0,0,0) !important;





          share|improve this answer














          This fiddle tests out a few different solutions from:




          • CSS transition effect makes image blurry / moves image 1px, in Chrome?

          • WebKit: Blurry text with css scale + translate3d

          • http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/


          Test Output



          CSS Output



          Fix 0



          -webkit-transform: translateZ(0);
          transform: translateZ(0);


          Fix 3



          -webkit-transform: translate3d(0,0,0) !important;
          transform: translate3d(0,0,0) !important;






          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited May 23 '17 at 10:31









          Community

          11




          11










          answered Dec 13 '14 at 23:01









          JSuar

          18.9k33070




          18.9k33070








          • 4




            Wow ... is there a reason as to why this fixes it. Or is that a feature by design.
            – Spaceman
            Sep 15 '15 at 22:46






          • 2




            I'm not clear how this fixes it, your examples are completely overriding the transform he wants. transform: translateZ(0) is the last rule applied so the X/Y translations are ignored. This fixes the blurring because the X/Y transforms are the source of the problem. For those trying to center, those x/y transforms must remain.
            – helion3
            Jul 19 '16 at 0:00






          • 1




            This is not a fix if it's exactly translate(-50%, -50%) (+ no blurry text) what one wants to achieve
            – Roko C. Buljan
            Jan 26 '17 at 16:21










          • we need a real fix, is this something for google to solve? or is this simple "impossible to fix if someone wants to use transforms" ?
            – Miguel
            Feb 15 '17 at 16:50










          • I think this answer is out of date. I no longer see this issue on the version of Chrome I am running. The issue doesn't present itself in the fiddle above.
            – JSuar
            Feb 15 '17 at 16:58
















          • 4




            Wow ... is there a reason as to why this fixes it. Or is that a feature by design.
            – Spaceman
            Sep 15 '15 at 22:46






          • 2




            I'm not clear how this fixes it, your examples are completely overriding the transform he wants. transform: translateZ(0) is the last rule applied so the X/Y translations are ignored. This fixes the blurring because the X/Y transforms are the source of the problem. For those trying to center, those x/y transforms must remain.
            – helion3
            Jul 19 '16 at 0:00






          • 1




            This is not a fix if it's exactly translate(-50%, -50%) (+ no blurry text) what one wants to achieve
            – Roko C. Buljan
            Jan 26 '17 at 16:21










          • we need a real fix, is this something for google to solve? or is this simple "impossible to fix if someone wants to use transforms" ?
            – Miguel
            Feb 15 '17 at 16:50










          • I think this answer is out of date. I no longer see this issue on the version of Chrome I am running. The issue doesn't present itself in the fiddle above.
            – JSuar
            Feb 15 '17 at 16:58










          4




          4




          Wow ... is there a reason as to why this fixes it. Or is that a feature by design.
          – Spaceman
          Sep 15 '15 at 22:46




          Wow ... is there a reason as to why this fixes it. Or is that a feature by design.
          – Spaceman
          Sep 15 '15 at 22:46




          2




          2




          I'm not clear how this fixes it, your examples are completely overriding the transform he wants. transform: translateZ(0) is the last rule applied so the X/Y translations are ignored. This fixes the blurring because the X/Y transforms are the source of the problem. For those trying to center, those x/y transforms must remain.
          – helion3
          Jul 19 '16 at 0:00




          I'm not clear how this fixes it, your examples are completely overriding the transform he wants. transform: translateZ(0) is the last rule applied so the X/Y translations are ignored. This fixes the blurring because the X/Y transforms are the source of the problem. For those trying to center, those x/y transforms must remain.
          – helion3
          Jul 19 '16 at 0:00




          1




          1




          This is not a fix if it's exactly translate(-50%, -50%) (+ no blurry text) what one wants to achieve
          – Roko C. Buljan
          Jan 26 '17 at 16:21




          This is not a fix if it's exactly translate(-50%, -50%) (+ no blurry text) what one wants to achieve
          – Roko C. Buljan
          Jan 26 '17 at 16:21












          we need a real fix, is this something for google to solve? or is this simple "impossible to fix if someone wants to use transforms" ?
          – Miguel
          Feb 15 '17 at 16:50




          we need a real fix, is this something for google to solve? or is this simple "impossible to fix if someone wants to use transforms" ?
          – Miguel
          Feb 15 '17 at 16:50












          I think this answer is out of date. I no longer see this issue on the version of Chrome I am running. The issue doesn't present itself in the fiddle above.
          – JSuar
          Feb 15 '17 at 16:58






          I think this answer is out of date. I no longer see this issue on the version of Chrome I am running. The issue doesn't present itself in the fiddle above.
          – JSuar
          Feb 15 '17 at 16:58












          up vote
          6
          down vote













          The only correct way to solve this:



          This problem arises from the fact of using % values to align the divs using css transforms. This results in decimals subpixel values, which your screen cannot render correctly. The solution is to normalize the resulting transformation matrix.



          Might work better for fixed divs that don´t do transforming animation. But if you do animate you could use a after end callback to this function to correct the final state.



          So:
          matrix (1,0,0,1,-375,-451.5) would become matrix (1,0,0,1,-375,-451)



          I call this method before the .show() of jquery... Or maybe just once in the application ( depends on your case) , you might need to also call this on the resize event etc..



          function roundCssTransformMatrix(element){
          var el = document.getElementById(element);
          el.style.transform=""; //resets the redifined matrix to allow recalculation, the original style should be defined in the class not inline.
          var mx = window.getComputedStyle(el, null); //gets the current computed style
          mx = mx.getPropertyValue("-webkit-transform") ||
          mx.getPropertyValue("-moz-transform") ||
          mx.getPropertyValue("-ms-transform") ||
          mx.getPropertyValue("-o-transform") ||
          mx.getPropertyValue("transform") || false;
          var values = mx.replace(/ |(|)|matrix/g,"").split(",");
          for(var v in values) { values[v]=v>4?Math.ceil(values[v]):values[v]; }

          $("#"+element).css({transform:"matrix("+values.join()+")"});

          }


          and call it



          roundCssTransformMatrix("MyElementDivId");
          $("#MyElementDivId").show();


          Beautiful isn't it?



          If you need to update on resize you could do it with:



          $( window ).resize(function() {
          roundCssTransformMatrix("MyElementDivId");
          });



          For this to work, all the parent must "be aligned / normalized"
          because if you by instance have the body with x=10.1px left, and the
          child is 10px .. the issue wont disapear because of the parent having residual decimals on their matrix
          So you must apply this function to the each element that is a parent and
          uses transform.




          You can see this live script here: https://jsbin.com/fobana/edit?html,css,js,output






          share|improve this answer























          • I was hoping for a css only solution, but this will do. I can't use any of the other suggestions on here as I'm using this css for multiple elements on the page. Some but not all elements have a round number when giving a -50% offset. So setting it to calc(-50% - .5px) would fix some elements, but break others.
            – Jespertheend
            Mar 11 at 14:37















          up vote
          6
          down vote













          The only correct way to solve this:



          This problem arises from the fact of using % values to align the divs using css transforms. This results in decimals subpixel values, which your screen cannot render correctly. The solution is to normalize the resulting transformation matrix.



          Might work better for fixed divs that don´t do transforming animation. But if you do animate you could use a after end callback to this function to correct the final state.



          So:
          matrix (1,0,0,1,-375,-451.5) would become matrix (1,0,0,1,-375,-451)



          I call this method before the .show() of jquery... Or maybe just once in the application ( depends on your case) , you might need to also call this on the resize event etc..



          function roundCssTransformMatrix(element){
          var el = document.getElementById(element);
          el.style.transform=""; //resets the redifined matrix to allow recalculation, the original style should be defined in the class not inline.
          var mx = window.getComputedStyle(el, null); //gets the current computed style
          mx = mx.getPropertyValue("-webkit-transform") ||
          mx.getPropertyValue("-moz-transform") ||
          mx.getPropertyValue("-ms-transform") ||
          mx.getPropertyValue("-o-transform") ||
          mx.getPropertyValue("transform") || false;
          var values = mx.replace(/ |(|)|matrix/g,"").split(",");
          for(var v in values) { values[v]=v>4?Math.ceil(values[v]):values[v]; }

          $("#"+element).css({transform:"matrix("+values.join()+")"});

          }


          and call it



          roundCssTransformMatrix("MyElementDivId");
          $("#MyElementDivId").show();


          Beautiful isn't it?



          If you need to update on resize you could do it with:



          $( window ).resize(function() {
          roundCssTransformMatrix("MyElementDivId");
          });



          For this to work, all the parent must "be aligned / normalized"
          because if you by instance have the body with x=10.1px left, and the
          child is 10px .. the issue wont disapear because of the parent having residual decimals on their matrix
          So you must apply this function to the each element that is a parent and
          uses transform.




          You can see this live script here: https://jsbin.com/fobana/edit?html,css,js,output






          share|improve this answer























          • I was hoping for a css only solution, but this will do. I can't use any of the other suggestions on here as I'm using this css for multiple elements on the page. Some but not all elements have a round number when giving a -50% offset. So setting it to calc(-50% - .5px) would fix some elements, but break others.
            – Jespertheend
            Mar 11 at 14:37













          up vote
          6
          down vote










          up vote
          6
          down vote









          The only correct way to solve this:



          This problem arises from the fact of using % values to align the divs using css transforms. This results in decimals subpixel values, which your screen cannot render correctly. The solution is to normalize the resulting transformation matrix.



          Might work better for fixed divs that don´t do transforming animation. But if you do animate you could use a after end callback to this function to correct the final state.



          So:
          matrix (1,0,0,1,-375,-451.5) would become matrix (1,0,0,1,-375,-451)



          I call this method before the .show() of jquery... Or maybe just once in the application ( depends on your case) , you might need to also call this on the resize event etc..



          function roundCssTransformMatrix(element){
          var el = document.getElementById(element);
          el.style.transform=""; //resets the redifined matrix to allow recalculation, the original style should be defined in the class not inline.
          var mx = window.getComputedStyle(el, null); //gets the current computed style
          mx = mx.getPropertyValue("-webkit-transform") ||
          mx.getPropertyValue("-moz-transform") ||
          mx.getPropertyValue("-ms-transform") ||
          mx.getPropertyValue("-o-transform") ||
          mx.getPropertyValue("transform") || false;
          var values = mx.replace(/ |(|)|matrix/g,"").split(",");
          for(var v in values) { values[v]=v>4?Math.ceil(values[v]):values[v]; }

          $("#"+element).css({transform:"matrix("+values.join()+")"});

          }


          and call it



          roundCssTransformMatrix("MyElementDivId");
          $("#MyElementDivId").show();


          Beautiful isn't it?



          If you need to update on resize you could do it with:



          $( window ).resize(function() {
          roundCssTransformMatrix("MyElementDivId");
          });



          For this to work, all the parent must "be aligned / normalized"
          because if you by instance have the body with x=10.1px left, and the
          child is 10px .. the issue wont disapear because of the parent having residual decimals on their matrix
          So you must apply this function to the each element that is a parent and
          uses transform.




          You can see this live script here: https://jsbin.com/fobana/edit?html,css,js,output






          share|improve this answer














          The only correct way to solve this:



          This problem arises from the fact of using % values to align the divs using css transforms. This results in decimals subpixel values, which your screen cannot render correctly. The solution is to normalize the resulting transformation matrix.



          Might work better for fixed divs that don´t do transforming animation. But if you do animate you could use a after end callback to this function to correct the final state.



          So:
          matrix (1,0,0,1,-375,-451.5) would become matrix (1,0,0,1,-375,-451)



          I call this method before the .show() of jquery... Or maybe just once in the application ( depends on your case) , you might need to also call this on the resize event etc..



          function roundCssTransformMatrix(element){
          var el = document.getElementById(element);
          el.style.transform=""; //resets the redifined matrix to allow recalculation, the original style should be defined in the class not inline.
          var mx = window.getComputedStyle(el, null); //gets the current computed style
          mx = mx.getPropertyValue("-webkit-transform") ||
          mx.getPropertyValue("-moz-transform") ||
          mx.getPropertyValue("-ms-transform") ||
          mx.getPropertyValue("-o-transform") ||
          mx.getPropertyValue("transform") || false;
          var values = mx.replace(/ |(|)|matrix/g,"").split(",");
          for(var v in values) { values[v]=v>4?Math.ceil(values[v]):values[v]; }

          $("#"+element).css({transform:"matrix("+values.join()+")"});

          }


          and call it



          roundCssTransformMatrix("MyElementDivId");
          $("#MyElementDivId").show();


          Beautiful isn't it?



          If you need to update on resize you could do it with:



          $( window ).resize(function() {
          roundCssTransformMatrix("MyElementDivId");
          });



          For this to work, all the parent must "be aligned / normalized"
          because if you by instance have the body with x=10.1px left, and the
          child is 10px .. the issue wont disapear because of the parent having residual decimals on their matrix
          So you must apply this function to the each element that is a parent and
          uses transform.




          You can see this live script here: https://jsbin.com/fobana/edit?html,css,js,output







          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Jul 2 at 9:51

























          answered Feb 15 '17 at 18:03









          Miguel

          1,4971818




          1,4971818












          • I was hoping for a css only solution, but this will do. I can't use any of the other suggestions on here as I'm using this css for multiple elements on the page. Some but not all elements have a round number when giving a -50% offset. So setting it to calc(-50% - .5px) would fix some elements, but break others.
            – Jespertheend
            Mar 11 at 14:37


















          • I was hoping for a css only solution, but this will do. I can't use any of the other suggestions on here as I'm using this css for multiple elements on the page. Some but not all elements have a round number when giving a -50% offset. So setting it to calc(-50% - .5px) would fix some elements, but break others.
            – Jespertheend
            Mar 11 at 14:37
















          I was hoping for a css only solution, but this will do. I can't use any of the other suggestions on here as I'm using this css for multiple elements on the page. Some but not all elements have a round number when giving a -50% offset. So setting it to calc(-50% - .5px) would fix some elements, but break others.
          – Jespertheend
          Mar 11 at 14:37




          I was hoping for a css only solution, but this will do. I can't use any of the other suggestions on here as I'm using this css for multiple elements on the page. Some but not all elements have a round number when giving a -50% offset. So setting it to calc(-50% - .5px) would fix some elements, but break others.
          – Jespertheend
          Mar 11 at 14:37










          up vote
          4
          down vote













          Thanks for the CSS example. It seems translateX(50%) and translateY(50%) are calculating a pixel value with a decimal place (eg, 0.5px) which causes subpixel rendering.



          There are many fixes for this but if you want to retain the quality of the text, your best solution right now is to use -webkit-font-smoothing: subpixel-antialiased; on .md-modal to force the render state for webkit browsers like Chrome and Safari.






          share|improve this answer

















          • 1




            Hey thanks for the reply, I added that line, but no affect im afraid
            – D-W
            Dec 11 '14 at 14:28










          • @D-W have you found a solution yet? Do you have a Codepen or jsFiddle we can look at?
            – josh1978
            Sep 4 '15 at 1:39






          • 1




            I Math.round() 'ed the translateX(x) value for my code and the rendering is now smooth. Thanks.
            – Mak
            Oct 29 '15 at 9:57






          • 2




            @mak - can you provide some more detail on exactly how you implemented your solution using Math.round() ?
            – GWR
            Jan 11 '16 at 0:39















          up vote
          4
          down vote













          Thanks for the CSS example. It seems translateX(50%) and translateY(50%) are calculating a pixel value with a decimal place (eg, 0.5px) which causes subpixel rendering.



          There are many fixes for this but if you want to retain the quality of the text, your best solution right now is to use -webkit-font-smoothing: subpixel-antialiased; on .md-modal to force the render state for webkit browsers like Chrome and Safari.






          share|improve this answer

















          • 1




            Hey thanks for the reply, I added that line, but no affect im afraid
            – D-W
            Dec 11 '14 at 14:28










          • @D-W have you found a solution yet? Do you have a Codepen or jsFiddle we can look at?
            – josh1978
            Sep 4 '15 at 1:39






          • 1




            I Math.round() 'ed the translateX(x) value for my code and the rendering is now smooth. Thanks.
            – Mak
            Oct 29 '15 at 9:57






          • 2




            @mak - can you provide some more detail on exactly how you implemented your solution using Math.round() ?
            – GWR
            Jan 11 '16 at 0:39













          up vote
          4
          down vote










          up vote
          4
          down vote









          Thanks for the CSS example. It seems translateX(50%) and translateY(50%) are calculating a pixel value with a decimal place (eg, 0.5px) which causes subpixel rendering.



          There are many fixes for this but if you want to retain the quality of the text, your best solution right now is to use -webkit-font-smoothing: subpixel-antialiased; on .md-modal to force the render state for webkit browsers like Chrome and Safari.






          share|improve this answer












          Thanks for the CSS example. It seems translateX(50%) and translateY(50%) are calculating a pixel value with a decimal place (eg, 0.5px) which causes subpixel rendering.



          There are many fixes for this but if you want to retain the quality of the text, your best solution right now is to use -webkit-font-smoothing: subpixel-antialiased; on .md-modal to force the render state for webkit browsers like Chrome and Safari.







          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Dec 11 '14 at 10:46









          BurpmanJunior

          708411




          708411








          • 1




            Hey thanks for the reply, I added that line, but no affect im afraid
            – D-W
            Dec 11 '14 at 14:28










          • @D-W have you found a solution yet? Do you have a Codepen or jsFiddle we can look at?
            – josh1978
            Sep 4 '15 at 1:39






          • 1




            I Math.round() 'ed the translateX(x) value for my code and the rendering is now smooth. Thanks.
            – Mak
            Oct 29 '15 at 9:57






          • 2




            @mak - can you provide some more detail on exactly how you implemented your solution using Math.round() ?
            – GWR
            Jan 11 '16 at 0:39














          • 1




            Hey thanks for the reply, I added that line, but no affect im afraid
            – D-W
            Dec 11 '14 at 14:28










          • @D-W have you found a solution yet? Do you have a Codepen or jsFiddle we can look at?
            – josh1978
            Sep 4 '15 at 1:39






          • 1




            I Math.round() 'ed the translateX(x) value for my code and the rendering is now smooth. Thanks.
            – Mak
            Oct 29 '15 at 9:57






          • 2




            @mak - can you provide some more detail on exactly how you implemented your solution using Math.round() ?
            – GWR
            Jan 11 '16 at 0:39








          1




          1




          Hey thanks for the reply, I added that line, but no affect im afraid
          – D-W
          Dec 11 '14 at 14:28




          Hey thanks for the reply, I added that line, but no affect im afraid
          – D-W
          Dec 11 '14 at 14:28












          @D-W have you found a solution yet? Do you have a Codepen or jsFiddle we can look at?
          – josh1978
          Sep 4 '15 at 1:39




          @D-W have you found a solution yet? Do you have a Codepen or jsFiddle we can look at?
          – josh1978
          Sep 4 '15 at 1:39




          1




          1




          I Math.round() 'ed the translateX(x) value for my code and the rendering is now smooth. Thanks.
          – Mak
          Oct 29 '15 at 9:57




          I Math.round() 'ed the translateX(x) value for my code and the rendering is now smooth. Thanks.
          – Mak
          Oct 29 '15 at 9:57




          2




          2




          @mak - can you provide some more detail on exactly how you implemented your solution using Math.round() ?
          – GWR
          Jan 11 '16 at 0:39




          @mak - can you provide some more detail on exactly how you implemented your solution using Math.round() ?
          – GWR
          Jan 11 '16 at 0:39










          up vote
          3
          down vote













          I ended up fixing this by removing these lines:



          -webkit-backface-visibility: hidden;
          -moz-backface-visibility: hidden;
          backface-visibility: hidden;





          share|improve this answer

























            up vote
            3
            down vote













            I ended up fixing this by removing these lines:



            -webkit-backface-visibility: hidden;
            -moz-backface-visibility: hidden;
            backface-visibility: hidden;





            share|improve this answer























              up vote
              3
              down vote










              up vote
              3
              down vote









              I ended up fixing this by removing these lines:



              -webkit-backface-visibility: hidden;
              -moz-backface-visibility: hidden;
              backface-visibility: hidden;





              share|improve this answer












              I ended up fixing this by removing these lines:



              -webkit-backface-visibility: hidden;
              -moz-backface-visibility: hidden;
              backface-visibility: hidden;






              share|improve this answer












              share|improve this answer



              share|improve this answer










              answered Aug 28 '16 at 9:43









              Jezen Thomas

              10.8k43681




              10.8k43681






















                  up vote
                  2
                  down vote













                  For modal boxes, this css will help:



                  -webkit-transform: translate3d(-50%, -51%, 0);
                  -moz-transform: translate3d(-50%, -51%, 0);
                  transform: translate3d(-50%, -51%, 0);


                  Instead of placing Y axis at 50%, make it 51%. This helps in my cse.
                  If you have a different positioning, play around, but usually 1% up/down fixes blurry content.






                  share|improve this answer

























                    up vote
                    2
                    down vote













                    For modal boxes, this css will help:



                    -webkit-transform: translate3d(-50%, -51%, 0);
                    -moz-transform: translate3d(-50%, -51%, 0);
                    transform: translate3d(-50%, -51%, 0);


                    Instead of placing Y axis at 50%, make it 51%. This helps in my cse.
                    If you have a different positioning, play around, but usually 1% up/down fixes blurry content.






                    share|improve this answer























                      up vote
                      2
                      down vote










                      up vote
                      2
                      down vote









                      For modal boxes, this css will help:



                      -webkit-transform: translate3d(-50%, -51%, 0);
                      -moz-transform: translate3d(-50%, -51%, 0);
                      transform: translate3d(-50%, -51%, 0);


                      Instead of placing Y axis at 50%, make it 51%. This helps in my cse.
                      If you have a different positioning, play around, but usually 1% up/down fixes blurry content.






                      share|improve this answer












                      For modal boxes, this css will help:



                      -webkit-transform: translate3d(-50%, -51%, 0);
                      -moz-transform: translate3d(-50%, -51%, 0);
                      transform: translate3d(-50%, -51%, 0);


                      Instead of placing Y axis at 50%, make it 51%. This helps in my cse.
                      If you have a different positioning, play around, but usually 1% up/down fixes blurry content.







                      share|improve this answer












                      share|improve this answer



                      share|improve this answer










                      answered Feb 5 '16 at 15:12









                      Dušan

                      1871520




                      1871520






















                          up vote
                          1
                          down vote













                          It took me a while to find a solution that I wouldn't bother using, so I'll post it here.



                          The problem for me was that the child div had width and height properties with a combination that caused the problem.



                          As I changed the height for another value, it just worked!



                          This probably has to do with the other answers, but I didn't want to use any JS or change the transform property to fix it.



                          Here is a live example: JSFIDDLE






                          share|improve this answer





















                          • I am confused as to how this works.. but thanks for sharing. I will try this.
                            – captainrad
                            Aug 28 '17 at 16:49















                          up vote
                          1
                          down vote













                          It took me a while to find a solution that I wouldn't bother using, so I'll post it here.



                          The problem for me was that the child div had width and height properties with a combination that caused the problem.



                          As I changed the height for another value, it just worked!



                          This probably has to do with the other answers, but I didn't want to use any JS or change the transform property to fix it.



                          Here is a live example: JSFIDDLE






                          share|improve this answer





















                          • I am confused as to how this works.. but thanks for sharing. I will try this.
                            – captainrad
                            Aug 28 '17 at 16:49













                          up vote
                          1
                          down vote










                          up vote
                          1
                          down vote









                          It took me a while to find a solution that I wouldn't bother using, so I'll post it here.



                          The problem for me was that the child div had width and height properties with a combination that caused the problem.



                          As I changed the height for another value, it just worked!



                          This probably has to do with the other answers, but I didn't want to use any JS or change the transform property to fix it.



                          Here is a live example: JSFIDDLE






                          share|improve this answer












                          It took me a while to find a solution that I wouldn't bother using, so I'll post it here.



                          The problem for me was that the child div had width and height properties with a combination that caused the problem.



                          As I changed the height for another value, it just worked!



                          This probably has to do with the other answers, but I didn't want to use any JS or change the transform property to fix it.



                          Here is a live example: JSFIDDLE







                          share|improve this answer












                          share|improve this answer



                          share|improve this answer










                          answered Aug 10 '17 at 20:19









                          Airton Gessner

                          1209




                          1209












                          • I am confused as to how this works.. but thanks for sharing. I will try this.
                            – captainrad
                            Aug 28 '17 at 16:49


















                          • I am confused as to how this works.. but thanks for sharing. I will try this.
                            – captainrad
                            Aug 28 '17 at 16:49
















                          I am confused as to how this works.. but thanks for sharing. I will try this.
                          – captainrad
                          Aug 28 '17 at 16:49




                          I am confused as to how this works.. but thanks for sharing. I will try this.
                          – captainrad
                          Aug 28 '17 at 16:49










                          up vote
                          0
                          down vote













                          Adding a CSS transition to the parent element of the parent element of my blurry element (which was using transformX which was causing blurriness) actually cancelled out the offending blurriness.






                          share|improve this answer

























                            up vote
                            0
                            down vote













                            Adding a CSS transition to the parent element of the parent element of my blurry element (which was using transformX which was causing blurriness) actually cancelled out the offending blurriness.






                            share|improve this answer























                              up vote
                              0
                              down vote










                              up vote
                              0
                              down vote









                              Adding a CSS transition to the parent element of the parent element of my blurry element (which was using transformX which was causing blurriness) actually cancelled out the offending blurriness.






                              share|improve this answer












                              Adding a CSS transition to the parent element of the parent element of my blurry element (which was using transformX which was causing blurriness) actually cancelled out the offending blurriness.







                              share|improve this answer












                              share|improve this answer



                              share|improve this answer










                              answered Sep 16 '16 at 12:06









                              Ol Tron

                              11




                              11






















                                  up vote
                                  0
                                  down vote













                                  The similar issue happened for me.



                                  I tried with all the suggested methods none worked fine. However,finally I resolved it.
                                  As there is an issue with google chrome having font-weight:600 or more.
                                  Try changing the font-family to font-family:"Webly Sleek SemiBold","Helvetica";



                                  The font-weight property will work fine for it.



                                  Blur_Font



                                  Without_Blur






                                  share|improve this answer



























                                    up vote
                                    0
                                    down vote













                                    The similar issue happened for me.



                                    I tried with all the suggested methods none worked fine. However,finally I resolved it.
                                    As there is an issue with google chrome having font-weight:600 or more.
                                    Try changing the font-family to font-family:"Webly Sleek SemiBold","Helvetica";



                                    The font-weight property will work fine for it.



                                    Blur_Font



                                    Without_Blur






                                    share|improve this answer

























                                      up vote
                                      0
                                      down vote










                                      up vote
                                      0
                                      down vote









                                      The similar issue happened for me.



                                      I tried with all the suggested methods none worked fine. However,finally I resolved it.
                                      As there is an issue with google chrome having font-weight:600 or more.
                                      Try changing the font-family to font-family:"Webly Sleek SemiBold","Helvetica";



                                      The font-weight property will work fine for it.



                                      Blur_Font



                                      Without_Blur






                                      share|improve this answer














                                      The similar issue happened for me.



                                      I tried with all the suggested methods none worked fine. However,finally I resolved it.
                                      As there is an issue with google chrome having font-weight:600 or more.
                                      Try changing the font-family to font-family:"Webly Sleek SemiBold","Helvetica";



                                      The font-weight property will work fine for it.



                                      Blur_Font



                                      Without_Blur







                                      share|improve this answer














                                      share|improve this answer



                                      share|improve this answer








                                      edited Nov 13 at 16:36









                                      kenlukas

                                      1,2261217




                                      1,2261217










                                      answered Nov 13 at 14:57









                                      Knowledge hunt

                                      11




                                      11






























                                           

                                          draft saved


                                          draft discarded



















































                                           


                                          draft saved


                                          draft discarded














                                          StackExchange.ready(
                                          function () {
                                          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f27385126%2fchrome-font-appears-blurry%23new-answer', 'question_page');
                                          }
                                          );

                                          Post as a guest















                                          Required, but never shown





















































                                          Required, but never shown














                                          Required, but never shown












                                          Required, but never shown







                                          Required, but never shown

































                                          Required, but never shown














                                          Required, but never shown












                                          Required, but never shown







                                          Required, but never shown







                                          Popular posts from this blog

                                          Guess what letter conforming each word

                                          Port of Spain

                                          Run scheduled task as local user group (not BUILTIN)