New issue
Advanced search Search tips

Issue 688509 link

Starred by 3 users

Issue metadata

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



Sign in to add a comment

Canvas with object-fit:cover doesn't draw full image

Reported by toufali....@gmail.com, Feb 3 2017

Issue description

UserAgent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36

Steps to reproduce the problem:
1. visit https://jsfiddle.net/gfgwdsho/
2. drag the output window borders around to resize
3. notice drawImage() is not painting the entire canvas

What is the expected behavior?
The entire canvas should be painted.  This works as expected on Firefox and Safari.

What went wrong?
It looks like drawing only occurs at canvas minus overflow, if that makes sense...

Did this work before? N/A 

Chrome version: 56.0.2924.87  Channel: stable
OS Version: 10.0
Flash Version: Shockwave Flash 24.0 r0

 

Comment 1 by woxxom@gmail.com, Feb 3 2017

Repro note: attached screenshot 1 shows a partly painted canvas. The paint rectangle is misplaced which is clearly seen upon enabling "Paint flashing" option in devtools - Rendering panel (screenshot 2).
screenshot1.png
437 KB View Download
screenshot2.png
546 KB View Download
Labels: M-58
Status: Untriaged (was: Unconfirmed)
Able to reproduce this issue on Win-10 using chrome reported version #56.0.2924.87 and latest canary #58.0.3003.0.
Unable to reproduce on Linux and Mac.

This is a non-regression issue as it is observed from M45 old builds. 

When checked using M-40 builds, the video at https://jsfiddle.net/gfgwdsho/ did not play.

Hence, marking it as untriaged to get more inputs from dev team.

Thanks...!!

Comment 3 by kochi@chromium.org, Feb 8 2017

Components: -Blink Blink>Canvas
Routing to canvas team - could anyone triage this?

Comment 4 by junov@chromium.org, Feb 8 2017

Owner: junov@chromium.org
Status: Assigned (was: Untriaged)
It looks like the paint invalidations have a bad Offset.  The invalidation rectangles have the right size, but their top left corner reflects the top left corner of the clipped overflow content rather than the top left corner of the canvas element.

The reason this is Windows-specific probably has to do with the fact that ANGLE exposes a D3D feature that allows partial buffer swaps.  We use this to accelerate compositing by only updating invalidated area to the presentation surface.

Comment 5 by junov@chromium.org, Feb 8 2017

The bug is canvas-specific. I tried using object-fit:cover with a video and with an img (animated gif), and they worked fine.
Cc: pdr@chromium.org
Object-fit has special code in CompositedLayerMapping for images IIRC. Probably
needs to be copied for canvas? Let me know if you need pointers. I think pdr
wrote the latest fixes (a year or so ago).

Comment 7 by pdr@chromium.org, Feb 17 2017

Junov, can you check contentsRect in CompositedLayermapping? I didn't verify if it's the culprit, but the code looks suspect.

Comment 8 by junov@chromium.org, Feb 21 2017

Owner: fs...@chromium.org

Comment 9 by fs...@chromium.org, Sep 4 2017

Just noticed this bug. We are clearly not doing the right thing with object-fit for canvas (cover or content). Will address soon.
Cc: schenney@chromium.org
fserb@: I have another repro case directly from our layout tests. Please see the attached file. 

If you change the size of the canvas to be 288*144, which is smaller than 256*256, then the result is correct because we are not using GPU canvas. As long as the size of the canvas is larger than the threshold, we trigger the GPU canvas, and the result is wrong. Particularly for cover and none I think.

Also, looks like it is clipping that is wrong.
circles-landscape.png
6.9 KB View Download
object-fit-canvas.html
1.9 KB View Download
Cc: fs...@chromium.org
Owner: ----
Status: Available (was: Assigned)

Sign in to add a comment