Chrome Font appears Blurry

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?

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 09 '14 at 17:35
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 09 '14 at 17:37
You could try something like `-webkit-font-smoothing: none;` — Chad, Dec 09 '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, sorry it made no difference, Im now looking to use another modal control instead, appreciate the response tho — D-W, Dec 23 '14 at 17:20
I use matrix normalization after layout : http://stackoverflow.com/a/42256897/1834212 — Miguel, Feb 15 '17 at 18:32

score 45 · Answer 1 · answered Mar 05 '17 at 20:44

45

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.

answered Mar 05 '17 at 20:44

arjansmeets

475
4
2

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 06 '17 at 13:50
2

most clutch answer I've found in some time :) – scniro Dec 01 '17 at 17:44
How can you be sure it would be fixed accros all devices ? – Raja Khoury Mar 11 '19 at 20:56
1

This didn't fix the issue for me (Chrome 75). – Jake Reece Jul 02 '19 at 13:34
- .4px is sharper :) – Coffee bean Nov 11 '19 at 17:10
Wow! Probably more hacky than Miguels very good answer but this is so much more reliable to me that it's very worth it until browsers start implementing their own fixes for this – little tiny man Aug 07 '20 at 08:32
Stuck on hours and This worked for me. Thanks a lot :) – thinuwan May 28 '21 at 13:36
1

Not sure why this has so many upvotes, this will just fix it if the element height happens to be an odd number of pixels (so `-50%` is not an integer). If it happens to be an even number of pixels, it will do the exact opposite. So the result will vary depending on the size of the browser window. – cdauth Feb 15 '22 at 11:02

score 37 · Answer 2 · edited Jul 10 '16 at 09:07

37

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;
}

edited Jul 10 '16 at 09:07

Mosh Feu

28,354
16
88
135

answered Mar 12 '16 at 07:40

Iman Mohamadi

6,552
3
34
33

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
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: https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ – Nomak22 Aug 10 '16 at 08:37
I agreed with @nomak22 explanation.You can check it by changing line-height of the text. – Jaswinder Oct 27 '16 at 16:55
1

Does not work at all at the time of this comment. Chrome on Win10. -webkit-font-smoothing has absolutely no effect whatever the value is. And the blur filter just blurs things as it should, while I thought we were trying to remove the blurriness? – Matvey Andreyev Jun 25 '19 at 13:20

score 33 · Answer 3 · edited Jun 20 '20 at 09:12

33

This fiddle tests out a few different solutions from:

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;

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 13 '14 at 23:01

JSuar

21,056
4
39
83

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
3

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 00:00
3

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
1

check this transform matrix normalization http://stackoverflow.com/a/42256897/1834212 – Miguel Feb 15 '17 at 18:33
In my case I moved a sidebar using ` transform: translateX(-18.75rem);`. Changing it to use `px` instead: `transform: translateX(-300px)`, no blur anymore. – Legends Feb 05 '20 at 15:33
If you want to center while applying the fix: `transform: translate3d(-50%, -50%, 0)` does the trick :) – Joe82 Nov 20 '20 at 21:52

Miguel · Answer 4 · 2019-07-04T12:01:42.947

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

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 '18 at 14:37

score 9 · Answer 5 · answered Dec 11 '14 at 10:46

9

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.

answered Dec 11 '14 at 10:46

BurpmanJunior

988
5
13

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 04 '15 at 01:39
2

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

@mak - can you provide some more detail on exactly how you implemented your solution using Math.round() ? – GWR Jan 11 '16 at 00:39
I upvote this answer not because the solution worked for me, but because the first paragraph make me clear about what the cause of this issue. Thanks – Akza Jun 14 '22 at 04:48

score 5 · Answer 6 · answered Aug 28 '16 at 09:43

5

I ended up fixing this by removing these lines:

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

answered Aug 28 '16 at 09:43

Jezen Thomas

13,619
6
53
91

score 5 · Answer 7 · answered Aug 10 '17 at 20:19

5

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

answered Aug 10 '17 at 20:19

Airton Gessner

215
2
11

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

score 3 · Answer 8 · answered Oct 09 '19 at 08:34

3

If you want to center something, better use flexbox. It will help you position without having blurred text.

Add this to parent div of that element you want to center:

display: flex;
justify-content: center;
align-items: center;

Hope this helps.

answered Oct 09 '19 at 08:34

MarkoMarkovic

71
3

Coffee bean · Answer 9 · 2019-11-11T17:42:32.137

2

Seems Chrome 78 still has this bug https://bugs.chromium.org/p/chromium/issues/detail?id=521364.

Building upon previous answers, I found the CSS below gave me the sharpest display on a translated modal:

transform: translate(calc(-50% - .4px), calc(-50% - .4px));

EDIT: For IE11 compatibility:

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

edited Nov 11 '19 at 17:42

answered Nov 11 '19 at 17:08

Coffee bean

1,474
15
27

score 1 · Answer 10 · answered Feb 05 '16 at 15:12

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.

score 1 · Answer 11 · answered Feb 05 '20 at 09:58

TLDR

I faced this problem a few days ago. I almost went crazy trying to sharpen the fonts in Chrome. I have read all posts in this thread and in all other posts regarding sharpening fonts in Chrome. Even the message "The only correct way to solve this" did not help in my case. What helped?

It is worth mentioning that the problem occurred in the following div:

position: sticky;
left: 16%;

And the 'sticky' attribute turned out to be the biggest problem. For sticky elements, we set the position as for 'absolute' elements - using attributes the 'left', 'top' etc. And here is the problem: with not integer values of the 'left' the font is rendered dramatically blurry, with integers it is much better.

What is the solution?

position: sticky;    
left: 0;
margin-left: 16%;

And that's all. Chrome will handle the percentage 'margin' and the fonts will look sharp.

score 1 · Answer 12 · answered Aug 20 '22 at 10:32

1

I know this is an old issue but since i stumbled across it in 2022 I thought I just tell someone who needs this how I solved it in my situation:

I had a modal with a textarea in it and in Chrome it was displayed blurry, but only when the textarea was overflowing. My modal - NOT the textarea itself - had overflow: hidden; so I just removed that.

answered Aug 20 '22 at 10:32

DisplayName

31
3

what if you need the overflow though? – Joseph Astrahan Jan 25 '23 at 01:31

score 0 · Answer 13 · answered Sep 16 '16 at 12:06

0

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.

answered Sep 16 '16 at 12:06

Ol Tron

1
1

score 0 · Answer 14 · edited Nov 13 '18 at 16:36

0

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

edited Nov 13 '18 at 16:36

kenlukas

3,616
9
25
36

answered Nov 13 '18 at 14:57

Knowledge hunt

1
1

score 0 · Answer 15 · answered Dec 08 '18 at 01:56

Another cause may be that you are not providing the needed font weights that you are utilizing.

For example, if you want to use both Lato or Roboto you want to include more than just the standard weight. This example applies if you are using Google Font API:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,900|Roboto:500,700">

Note: Lato is available in 100, 300, 400, 700, and 900 font-weight, but I had to specify 900 for my 700 text to become crisp...not sure why.

score 0 · Answer 16 · answered May 15 '19 at 06:22

0

For now, I found only one good solution:

transform: translate(-50%, -50.1%)

0.1% - in general user can't see this

Hope chrome will fix it - the bug exists since 2014))))

answered May 15 '19 at 06:22

egor.xyz

2,847
1
21
18

score 0 · Answer 17 · answered Aug 29 '19 at 17:07

If you do not want implementing any special js or custom solution and the only what you want to achieve is center your div, and the width and height does not have fixed size, you can simply use this:

position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;

If one of sizes is fixed, you can try this approach:

position: absolute;
left: 50%;
translate: transformX(-50%);
top: 0;
bottom: 0;
margin: auto;

It fixes the problem with blurred font in chrome.

score 0 · Answer 18 · answered Nov 14 '19 at 10:43

0

You can solve this issue by putting:

    transform: inherit;

answered Nov 14 '19 at 10:43

vik

39
2

score 0 · Answer 19 · answered Jan 19 '20 at 13:17

The best way I've found to resolve this issue which appears to only be an issue in Chrome and only on specific screen sizes, is to replace all transform:translate(-50%,50%) definitions with alternate solutions. Using any other solution may solve it on your screen, but not on another.

Transform definitions are usually used to center elements. Rather than using a transform definition, find another way to center your element, problem will be solved. In our case, we had a fixed div we wanted centered, with a max-width of 1800px and bottom set to 0px;

#cntr{position:fixed;left:50%;bottom:0;width:100%;max-width:1800px;transform:translateX(-50%);-ms-transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-o-transform:translateX(-50%);text-align:center;}

Lot of definitions in there to cover all browsers. Changed to this to resolve it :

#cntr{position:fixed;left:0;right:0;margin:auto;bottom:0;width:100%;max-width:1800px;text-align:center;}

A lot less code, cleaner, faster, and worked 100%, without needing to edit any HTML.

Definitions that now center the fixed pos div are: left:0;right:0;margin:auto;

No translate required, no decimal point placed divs.

score 0 · Answer 20 · answered Feb 11 '20 at 21:01

0

For those still trying to find a solution to this, setting background fixed it for me for some reason.

background: #fff;

answered Feb 11 '20 at 21:01

failSnacks

1
2

score 0 · Answer 21 · answered Mar 09 '20 at 15:15

I found that applying the translate3d(0, 0, 0) fix as JSuar suggested worked in Chrome but not Safari.

The one thing that did work across browsers was to give the element I was centring (using transform: translate(50%, -50%)) an even pixel width — changing the width from 425px to 426px made the text sharp again.

score 0 · Answer 22 · answered Sep 17 '20 at 01:23

The issue often happens with position: fixed; and transform: translate(...) when the width and height of the element are not a round even number.

One of the solutions is to round up the numbers programmatically. Example:

function roundToEven(x) {
  const rounded = Math.round(x)
  return rounded % 2 ? rounded + 1 : rounded
}
const element = document.getElementById('element-id')
const rect = element.getBoundingClientRect()
element.style.width = roundToEven(rect.width) + 'px'
element.style.height = roundToEven(rect.height) + 'px'

score 0 · Answer 23 · answered Oct 12 '20 at 15:18

You should choose your font with corresponding font weight which you want if you want thin, regular and bold text. You should choose font with weight 100 | 400 | 700 example: like below

Font weight is not only number. File should be available in server or directory. Each font weight is separate file.

If you force to change regular font into bold without resource, it showing with blurry. I hope you get it.

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;700&display=swap');

Thanks, this was exactly my problem! – alexw Jan 07 '21 at 23:37 — alexw, Jan 07 '21 at 23:37

score 0 · Answer 24 · answered May 05 '22 at 22:38

Just in case anyone is having this issue using the Roboto font from Google. My text was looking sort of blurry. I noticed that I wasn't importing the correct font-weight from Google. I needed 700 but wasn't including it.

https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap

vs

https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap

score -1 · Answer 25 · answered May 09 '20 at 13:40

-1

I had this issue with my site as well, using a similar setup.

The issue appears because of a 0.5px difference.
An easy fix is to change the top property from 50% to calc(50% - .5px)

answered May 09 '20 at 13:40

Mohsen M.

11
1

Chrome Font appears Blurry

25 Answers25

Test Output

Fix 0

Fix 3

Linked