Can see the behavioral difference between Chrome Canary and Firefox Nightly on Windows.

I don't think this is a WebGL specific problem, but more likely a problem in how Unity is resizing the canvas. Is it possible that you are causing it to be non-pixel-aligned during layout?

Is there any way you could produce a smaller test case? While we appreciate any test case, this one is far from minimal.

Jayadev, do you have experience in determining exactly where layers ended up in the layer tree? If so, could you help confirm whether the canvas is ending up on a fractional offset?

Re #3: Yes, the canvas layer is ending up with fractional offset. Assigning the bug to you as I don't know what the next step is here.

A smaller test case if that is still needed:
http://files.unity3d.com/stefan/webgl/external_bugs/chrome_blurry2/index.html

Attached the Unity project itself.

Stays sharp all the time in FF and Edge.

Deleted: chrome_blurry2.zip 922 KB

chrome_blurry2.zip 922 KB Download

Forgot to mention:
1) run in chrome
2) start resizing browser window
3) notice it gets blurred at certain sizes

Jayadev: how did you figure out that the canvas is getting a fractional offset? Can you please offer the developer any advice on how to avoid this happening?

I can't repro yet, but my guess is that this is a composited layer with a fractional
translation. It might be the

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

CSS, which if the # of pixels in the viewport is odd, will not be integral.

trchen is working on this issue, see issue 521364.

In general, it's a good idea to make sure transforms use integer coordinates when
possible.

yes, I have verified that this is a composited layer with a fractional translation.

De-duplicating as 521364 is only fixing it for picture layers. I haven't yet verified its a  picture layer.

The layer with fractional translation is picture layer.

Unduping.  This is WebGL and it creates a texture layer that has a fractional translation.  I suspect it is the case that this example also has some parent picture layer that also has a fractional translation.

The other bug has a webgl compositing trigger but is not webgl related in the same way that this bug is.

Fixing PictureLayer rasterization on its own to not be blurry will not fix this webgl case.  It might be worth trying to think about how to solve both of them, maybe needing a setting on a layer to pixel snap it and pass the offset to the layer to use for rasterization if it's a picture layer.

I'd like this to receive some attention. This was reported by an important customer (Unity) and their content needs to look good across all devices. Upgrading to P1 and scheduling for M56. If this can be investigated and fixed earlier, even better.

jaydasika: could you update this P1 with its progress, please?

Re #16 : Haven't made progress on this so far. I am currently working on another P1 that needs to be merged to M55. Will get to this after that.

Friendly ping to get an update on this.

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/2a1718bffdb1d3c9538731498382e9aafd886ceb

commit 2a1718bffdb1d3c9538731498382e9aafd886ceb
Author: jaydasika <jaydasika@chromium.org>
Date: Wed Oct 26 22:58:02 2016

cc : Snap texture layers to pixel boundary

This is to avoid blurring caused by fractional translation.

BUG= 629522 
CQ_INCLUDE_TRYBOTS=master.tryserver.blink:linux_precise_blink_rel

Review-Url: https://codereview.chromium.org/2451273003
Cr-Commit-Position: refs/heads/master@{#427859}

[modify] https://crrev.com/2a1718bffdb1d3c9538731498382e9aafd886ceb/cc/layers/layer.cc
[modify] https://crrev.com/2a1718bffdb1d3c9538731498382e9aafd886ceb/cc/layers/layer.h
[modify] https://crrev.com/2a1718bffdb1d3c9538731498382e9aafd886ceb/cc/layers/layer_impl.cc
[modify] https://crrev.com/2a1718bffdb1d3c9538731498382e9aafd886ceb/cc/layers/layer_impl.h
[modify] https://crrev.com/2a1718bffdb1d3c9538731498382e9aafd886ceb/cc/layers/texture_layer.cc
[modify] https://crrev.com/2a1718bffdb1d3c9538731498382e9aafd886ceb/cc/layers/texture_layer.h
[modify] https://crrev.com/2a1718bffdb1d3c9538731498382e9aafd886ceb/cc/layers/texture_layer_impl.cc
[modify] https://crrev.com/2a1718bffdb1d3c9538731498382e9aafd886ceb/cc/layers/texture_layer_impl.h
[modify] https://crrev.com/2a1718bffdb1d3c9538731498382e9aafd886ceb/cc/proto/property_tree.proto
[modify] https://crrev.com/2a1718bffdb1d3c9538731498382e9aafd886ceb/cc/trees/layer_tree_host_common_unittest.cc
[modify] https://crrev.com/2a1718bffdb1d3c9538731498382e9aafd886ceb/cc/trees/property_tree.cc
[modify] https://crrev.com/2a1718bffdb1d3c9538731498382e9aafd886ceb/cc/trees/property_tree_builder.cc
[modify] https://crrev.com/2a1718bffdb1d3c9538731498382e9aafd886ceb/cc/trees/property_tree_unittest.cc
[modify] https://crrev.com/2a1718bffdb1d3c9538731498382e9aafd886ceb/cc/trees/transform_node.cc
[modify] https://crrev.com/2a1718bffdb1d3c9538731498382e9aafd886ceb/cc/trees/transform_node.h

Tested the issue on Windows 10 using Chrome Dev M56 # 56.0.2902.0:

Navigated to https://files.unity3d.com/stefan/webgl/external_bugs/chrome_blurry/index_resize.html and below are the observations

1. Changed the system resolution to 3840* 2160 and observed no blurry contents.
2. Zoomed in the browser till 60 % and Zoomed out till 300 % and did not observe any blurry contents.

Attaching a screenshot comparing with Firefox for further reference.
Please let me know whether this is the intended behavior and update the issue which would help us in further triaging.

Thanks !

Deleted: 629522.png 1.1 MB

	629522.png 1.1 MB View Download

See also follow-on CLs that didn't reference this bug (but should have):

https://codereview.chromium.org/2451383003
https://codereview.chromium.org/2459613003/

Re #22 : The screenshot you attached is for https://files.unity3d.com/stefan/webgl/external_bugs/chrome_blurry/index.html which doesn't have the bug. This issue fixes bluriness on https://files.unity3d.com/stefan/webgl/external_bugs/chrome_blurry/index_resize.html , I have checked on ToT and it looks fixed (looks same as Firefox) to me.

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/679b26ff61f303d85a56f5df1fd6199f209ad7ca

commit 679b26ff61f303d85a56f5df1fd6199f209ad7ca
Author: ajuma <ajuma@chromium.org>
Date: Fri Oct 28 02:14:49 2016

Correctly rebaseline 2DCanvasWebGL pixel test

This is a follow-up to http://crrev.com/2451383003, which updated
an obsolete file.

BUG= 629522 , 660118 

CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:linux_optional_gpu_tests_rel;master.tryserver.chromium.mac:mac_optional_gpu_tests_rel;master.tryserver.chromium.win:win_optional_gpu_tests_rel;master.tryserver.chromium.android:android_optional_gpu_tests_rel
NOTRY=true

Review-Url: https://codereview.chromium.org/2459613003
Cr-Commit-Position: refs/heads/master@{#428245}

[modify] https://crrev.com/679b26ff61f303d85a56f5df1fd6199f209ad7ca/content/test/gpu/gpu_tests/pixel_expectations.py
[modify] https://crrev.com/679b26ff61f303d85a56f5df1fd6199f209ad7ca/content/test/gpu/gpu_tests/pixel_test_pages.py

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/7ca50e2014e8987c6a4d5e74d39be65893c91837

commit 7ca50e2014e8987c6a4d5e74d39be65893c91837
Author: ajuma <ajuma@chromium.org>
Date: Fri Oct 28 15:47:07 2016

Remove failure expectation for 2DCanvasWebGL pixel test

The reference images have been regenerated and the test is now
passing.

TBR=kbr@chromium.org

BUG= 629522 , 660118 
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:linux_optional_gpu_tests_rel;master.tryserver.chromium.mac:mac_optional_gpu_tests_rel;master.tryserver.chromium.win:win_optional_gpu_tests_rel;master.tryserver.chromium.android:android_optional_gpu_tests_rel

Review-Url: https://codereview.chromium.org/2458073002
Cr-Commit-Position: refs/heads/master@{#428383}

[modify] https://crrev.com/7ca50e2014e8987c6a4d5e74d39be65893c91837/content/test/gpu/gpu_tests/pixel_expectations.py