Blueprint: Table has blurry text

[tgreenwatts]

EDIT: Here's a better snapshot of how egregious this bug is:

Possibly related to performance issues

Seen on Chrome on Mac & on Chrome on Windows, not on IE Edge

[llorca]

Poking with will-change in the inspector fixes it

[blakegong]

Hi @llorca, it is not working after experimenting will-change on .bp-table-container with all values possible.

The Table in my case is displayed in a Dialog which only shows up when user clicks a button. It looks like the Table is rendered for a much smaller width and height, like it is picking up width and height values during the popup effect of the animation. (I agree it looks very much like pre-rendering is not correctly hinted to the browser, but since experiment with will-change results in no effect, now I have no idea)

Same as @tgreenwatts as it only appears on Chrome not Safari. And in my case, only Chrome on external monitors have this problem, internal monitor works fineinternal monitor looks much clearer, but still not 1:1 rendered. And sometimes it would get rendered clearly, but completely by luck. Tested on Mac with both Chrome and Chrome Canary.

[tgreenwatts]

Thinking about it more, I've only seen this when the table is in a dialog

[cmslewis]

Relevant YouTube video about will-change: https://www.youtube.com/watch?time_continue=87&v=iSvUlSpIbNk

[cmslewis]

Removing will-change: transform from bp-table-body-scroll-client and bp-table-container (in the inspector) fixes the issue for me.

[blakegong]

Thanks Chris. Works like a charm! Didn't notice the second will-change on the outside bp-table-container.

[cmslewis]

@giladgray @llorca @themadcreator Is the preferred solution here to remove will-change for a Table inside a Popover, or is the solution to remove will-change on Table in general? A blurry table is worse than a choppy scroll animation.

[blakegong]

@cmslewis Personally I only encountered this issue when using Table inside a Dialog, thus would prefer to only remove will-change on pt-dialog pt-table-container condition as a workaround. But if it is a more general issue of course it is up to you guys to decide :)

[llorca]

https://developer.mozilla.org/en-US/docs/Web/CSS/will-change

will-change is here for perf reasons (trying to hit 60 FPS everywhere), but we're probably misusing it. At this point, I'd be happy to remove it for now to fix this issue, and then properly investigate perf in general (https://github.com/palantir/blueprint/issues/390)

Edit: will-change also has to do with stacking context and z-indices... more tricky to remove than I imagined, cause removing it breaks a bunch of other things, see https://github.com/palantir/blueprint/pull/854#issuecomment-287211755