New issue
Advanced search Search tips

Issue 849706 link

Starred by 1 user

Issue metadata

Status: Assigned
Owner:
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: ----
Pri: 2
Type: Bug



Sign in to add a comment

CSS Paint API - shadows don't raster correctly when zooming visual viewport

Project Member Reported by ikilpatrick@chromium.org, Jun 5 2018

Issue description

Have reproduced this on MacOS and Android, so suspect its all platforms.

Box-shadows through the Paint API don't raster at the correct offset, instead they are dependent of what the current zoom of the visual viewport is.

I've done a little investigation, it seems do be during when we are rastering the SkRecord I think (Paint API JS callback isn't being called one visual viewport resizing).

 
index.html
171 bytes View Download
paint.js
233 bytes View Download
raster-bug-paint-api.mov
1.5 MB View Download
Cc: chrishtr@chromium.org vmp...@chromium.org
@vmpstr, @chrishtr - who would be a good person to help debug this?
Owner: xidac...@chromium.org
Status: Assigned (was: Available)
I will investigate. I suspect it is due the same problem as:
https://bugs.chromium.org/p/chromium/issues/detail?id=671849
Yeah - I debugged a bit and convinced myself that the bug is in the raster stage (or inputs to raster stage) rather than at the API level.  There are other potential bugs there with the shadow API in the PaintRenderingContext2D canvas - but this one needs to be solved first before we can sort out those.

FWIW I ran across this when building a demo for box-shadows for "triangle" corners for material.io. :)
Summary: CSS Paint API - some APIs do not respect browser zoom (was: CSS Paint API - shadows don't raster correctly when zooming visual viewport.)
I have a WIP CL for the shadow thing here:
https://chromium-review.googlesource.com/c/chromium/src/+/1087874

Basically the problem is that after the browser zooms (say 200%), the call back that queued won't respect that browser zoom. This problem exists in the following APIs:
setLineWidth
setMiterLimit
setLineDash
setLineDashOffset
Summary: CSS Paint API - shadows don't raster correctly when zooming visual viewport (was: CSS Paint API - some APIs do not respect browser zoom)
I take back what I said in #4. It looks like our system has already taken care of line related things, indicated here:
https://cs.chromium.org/chromium/src/third_party/WebKit/LayoutTests/http/tests/csspaint/geometry-background-image-zoom.html

So the bug is really just shadow related.
Project Member

Comment 6 by bugdroid1@chromium.org, Jun 6 2018

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

commit dc9657518fe353e8d88b35d3348d5346d911a1fd
Author: Xida Chen <xidachen@chromium.org>
Date: Wed Jun 06 17:02:45 2018

[PaintWorklet] Add a layout test to ensure API correctness with page zoom

This CL adds a new layout test to make sure that the following APIs:
lineWidth
lineDash
lineDashOffset
works properly with browser zoom.

Bug: 849706
Change-Id: I07c07e688203c26b2b2223377da88591a44a4e55
Reviewed-on: https://chromium-review.googlesource.com/1088870
Reviewed-by: Stephen McGruer <smcgruer@chromium.org>
Commit-Queue: Xida Chen <xidachen@chromium.org>
Cr-Commit-Position: refs/heads/master@{#564932}
[add] https://crrev.com/dc9657518fe353e8d88b35d3348d5346d911a1fd/third_party/WebKit/LayoutTests/http/tests/csspaint/line-dash-scale-with-page-zoom-expected.html
[add] https://crrev.com/dc9657518fe353e8d88b35d3348d5346d911a1fd/third_party/WebKit/LayoutTests/http/tests/csspaint/line-dash-scale-with-page-zoom.html

Project Member

Comment 7 by bugdroid1@chromium.org, Jun 6 2018

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

commit 76e7ac4c055ddd315dac46827b7db248c1369a2d
Author: Xida Chen <xidachen@chromium.org>
Date: Wed Jun 06 17:45:34 2018

[PaintWorklet] Fix shadow offset when page zooms

When the page zooms, for example, to 200%, the offset of the shadow
remains the same as when the page scale is 100%. The problem here is
that whenever we zoom the page, we queue a paint call back. Then the
new paint call back will set the shadow offset with the size that doesn't
account for the page zoom.

The fix is to override the BaseRenderingContext2d::setShadowOffset
method with the zoom.

This CL also includes a layout test to verify the correctness of the fix.

Bug: 849706
Change-Id: I427209fca397a7540936bccd9e8fb18ba7c018ba
Reviewed-on: https://chromium-review.googlesource.com/1087874
Reviewed-by: Stephen McGruer <smcgruer@chromium.org>
Reviewed-by: Fernando Serboncini <fserb@chromium.org>
Commit-Queue: Xida Chen <xidachen@chromium.org>
Cr-Commit-Position: refs/heads/master@{#564955}
[rename] https://crrev.com/76e7ac4c055ddd315dac46827b7db248c1369a2d/third_party/WebKit/LayoutTests/http/tests/csspaint/shadow-scale-with-page-zoom-expected.html
[rename] https://crrev.com/76e7ac4c055ddd315dac46827b7db248c1369a2d/third_party/WebKit/LayoutTests/http/tests/csspaint/shadow-scale-with-page-zoom.html
[modify] https://crrev.com/76e7ac4c055ddd315dac46827b7db248c1369a2d/third_party/blink/renderer/modules/canvas/canvas2d/base_rendering_context_2d.h
[modify] https://crrev.com/76e7ac4c055ddd315dac46827b7db248c1369a2d/third_party/blink/renderer/modules/csspaint/paint_rendering_context_2d.cc
[modify] https://crrev.com/76e7ac4c055ddd315dac46827b7db248c1369a2d/third_party/blink/renderer/modules/csspaint/paint_rendering_context_2d.h

This is now partially fixed.

On mac or android, on linux with device emulator, we will still see the jump shadow. Needs more debugging...

Sign in to add a comment