Animation stops with object-fit:contain on an animated 2d canvas

• Component: Canvas
• Status: RESOLVED FIXED

http://jsfiddle.net/n7nebbL8/17/

Expected behavior upon clicking 'Run':
Diagonal line should be slowly drawn from upper-left corner to lower right corner -- one pixel at a time per frame. There should be no gaps, lag, or stoppages when the line is being drawn until it reaches the lower right corner. The performance should be quite smooth.

Actual behavior:
The line drawing stops for long periods of time (500ms or more) part way through, stops entirely, or is missing many segments, resulting in a dotted line.

I've tested this on Safari with the latest iOS 12 beta as of this writing (16A5327f) and the problem still exists.
I don't have a desktop Safari to test with, but I wouldn't be surprised to see the same issue there -- it's worth trying out.

Chrome has the same bug.

Firefox has the expected behavior, so that can be used as a guide for how this should behave.

[Radar WebKit Bug Importer]

<rdar://problem/42454524>

[Simon Fraser (smfr)]

This is pretty funny. Turn on repaint rects in web inspector and you can see that we fail to map the repaints through the object-fit transform.

[Simon Fraser (smfr)]

Created attachment 345735 [details]
Patch

[zalan]

Comment on attachment 345735 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=345735&action=review

> Source/WebCore/html/HTMLCanvasElement.cpp:511
> +    if (is<RenderReplaced>(renderBox())) {

The canvas renderer is not necessarily a RenderReplaced.

[zalan]

(In reply to zalan from comment #4)
> Comment on attachment 345735 [details]
> Patch
> 
> View in context:
> https://bugs.webkit.org/attachment.cgi?id=345735&action=review
> 
> > Source/WebCore/html/HTMLCanvasElement.cpp:511
> > +    if (is<RenderReplaced>(renderBox())) {
> 
> The canvas renderer is not necessarily a RenderReplaced.
And the object-fit is specific to replaced elements.

[zalan]

https://trac.webkit.org/changeset/234187/webkit

[Dawei Fenton (:realdawei)]

Reverted r234187 for reason:

the layout test added with this change is flaky on the bots

Committed r234203: <https://trac.webkit.org/changeset/234203>

[Dawei Fenton (:realdawei)]

(In reply to David Fenton (:realdawei) from comment #7)
> Reverted r234187 for reason:
> 
> the layout test added with this change is flaky on the bots
> 
> Committed r234203: <https://trac.webkit.org/changeset/234203>

This test was 
A) Failing on High Sierra WK2 and Sierra WK 2, 
B) Flaky on High Sierra Release WK1, High Sierra (Leaks) and 
C) Failing on Windows Release.

So I made the decision to roll it out for now.

Sample Diff:
https://build.webkit.org/results/Apple%20High%20Sierra%20Release%20WK2%20(Tests)/r234195%20(5827)/fast/repaint/canvas-object-fit-diff.txt

--- /Volumes/Data/slave/highsierra-release-tests-wk2/build/layout-test-results/fast/repaint/canvas-object-fit-expected.txt
+++ /Volumes/Data/slave/highsierra-release-tests-wk2/build/layout-test-results/fast/repaint/canvas-object-fit-actual.txt
@@ -10,9 +10,6 @@
           (position 8.00 8.00)
           (bounds 202.00 102.00)
           (drawsContent 1)
-          (repaint rects
-            (rect 70.00 20.00 7.00 7.00)
-          )
         )
       )
     )


Flakiness Dashboard:
https://webkit-test-results.webkit.org/dashboards/flakiness_dashboard.html#showAllRuns=true&tests=fast%2Frepaint%2Fcanvas-object-fit.html

[Dawei Fenton (:realdawei)]

*** Bug 188007 has been marked as a duplicate of this bug. ***

[Ryan Haddad]

*** Bug 188004 has been marked as a duplicate of this bug. ***

[Simon Fraser (smfr)]

When the test flakes, there's no layer flush between the first drawing and the drawing with tracked repaints, so we've never cleared the dirty rect from the first fill, and the second draw doesn't add a new dirty rect.

In the good case we flush between the load event and the zero-delay timer.

[Simon Fraser (smfr)]

Re-landed in https://trac.webkit.org/changeset/234343/webkit with a fixed test.

[Truitt Savell]

Looks like after https://trac.webkit.org/changeset/234343/webkit, we have two tests. One is failing and the other is a timeout that fail together. Both tests are flakey. tests are failing on High Sierra Leaks bots

tests:
inspector/layers/layers-anonymous.html
inspector/layers/layer-tree-manager.html

combines history:
https://webkit-test-results.webkit.org/dashboards/flakiness_dashboard.html#showAllRuns=true&tests=inspector%2Flayers%2Flayers-anonymous.html%20inspector%2Flayers%2Flayer-tree-manager.html

Diffs:
https://build.webkit.org/results/Apple%20Sierra%20Release%20WK1%20(Tests)/r234434%20(11850)/inspector/layers/layer-tree-manager-pretty-diff.html

https://build.webkit.org/results/Apple%20Sierra%20Release%20WK1%20(Tests)/r234434%20(11850)/inspector/layers/layers-anonymous-pretty-diff.html

[Truitt Savell]

Looks like fast/repaint/canvas-object-fit.html has been flakey sense being reintroduced in:
https://trac.webkit.org/changeset/234343/webkit

Test History:
https://webkit-test-results.webkit.org/dashboards/flakiness_dashboard.html#showAllRuns=true&tests=fast%2Frepaint%2Fcanvas-object-fit.html

Reproduced with:
run-webkit-tests --root testbuild-234343 fast/repaint/canvas-object-fit.html --iterations 500 -f -1

Diff:
--- /Volumes/Data/slave/highsierra-release-tests-wk1/build/layout-test-results/fast/repaint/canvas-object-fit-expected.txt
+++ /Volumes/Data/slave/highsierra-release-tests-wk1/build/layout-test-results/fast/repaint/canvas-object-fit-actual.txt
@@ -1,21 +1 @@
- (GraphicsLayer
-  (anchor 0.00 0.00)
-  (bounds 800.00 600.00)
-  (children 1
-    (GraphicsLayer
-      (bounds 800.00 600.00)
-      (contentsOpaque 1)
-      (children 1
-        (GraphicsLayer
-          (position 8.00 8.00)
-          (bounds 202.00 102.00)
-          (drawsContent 1)
-          (repaint rects
-            (rect 70.00 20.00 7.00 7.00)
-          )
-        )
-      )
-    )
-  )
-)