Using translate3d makes the font blurry on Windows machines

[binarykitchen]

We have a couple of Windows users, running the latest Chrome, reporting a weird font issue: when font size is increased, the font is rendered blurry and becomes a bit harder to read.

Turns out that the CSS property translate3d is causing this. The use of translate3d triggers hardware acceleration and I cannot exactly say who to blame for this. But let me ask you first: why are you using translate3d here at all? And have you figured a workaround for Windows machines yet?

[binarykitchen]

Furthermore I see that those rows with .public_fixedDataTableRow_highlighted are looking good. The font in these highlighted rows is crisp and not blurry. Why?

[binarykitchen]

Also when you add one pixel to the translate3d(0px,27px,0px); to translate3d(0px,28px,0px); then the behavior gets inverted, all odd rows are crisp and the even ones are blurry.

[ehzhang]

@binarykitchen thanks for bringing this up! Do you think you could attach a screenshot of the issue? I have been so far unable to reproduce it on my end.

This may be because of the behavior of translate3d, and I'm guessing that it might have something to do with the setting of a width/height with a fractional value (like a percentage).

Translate3d is used because it triggers hardware acceleration in order to maximize performant scrolling, by giving us explicit control on the location of the elements within the viewport.

[binarykitchen]

Here is a screenshot:

Yes, I suspect fractional pixels too. But the issue happens on Windows machines only.

Do you think you could add an option to disable hardware acceleration? Or try to reproduce this on a Windows machine at least.

[tim-field]

I'm getting the same issue in Ubuntu Linux with Chrome. Text is clear in Firefox ( I don't think Firefox is hardware accelerated )

[tim-field]

For me this was caused by a non integer value for headerHeight

headerHeight={28.5}

Changing this to

headerHeight={28}

Fixed the issue in Chrome

[binarykitchen]

that I already know and doesn't help when the user is increasing/decreasing the font size in the browser

[jedwards1211]

I'm seeing this in Chrome on Linux, in the resizable columns example. I assume that if the JS were rounding the translation offsets this problem would go away