Bug 187840

Summary: Animation stops with object-fit:contain on an animated 2d canvas
Product: WebKit Reporter: andj2223
Component: CanvasAssignee: Simon Fraser (smfr) <simon.fraser>
Status: RESOLVED FIXED    
Severity: Major CC: commit-queue, dino, graouts, jonlee, realdawei, simon.fraser, tsavell, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari Technology Preview   
Hardware: iPhone / iPad   
OS: Other   
See Also: https://bugs.webkit.org/show_bug.cgi?id=188007
https://bugs.webkit.org/show_bug.cgi?id=188910
https://bugs.webkit.org/show_bug.cgi?id=188394
Attachments:
Description Flags
Patch zalan: review+

andj2223
Reported 2018-07-19 18:58:39 PDT
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.
Attachments
Patch (10.28 KB, patch)
2018-07-24 18:59 PDT, Simon Fraser (smfr) 		zalan: review+
DetailsFormatted DiffDiff
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2018-07-20 19:27:04 PDT
<rdar://problem/42454524>
Simon Fraser (smfr)
Comment 2 2018-07-24 18:04:47 PDT
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)
Comment 3 2018-07-24 18:59:06 PDT
Created attachment 345735 [details] Patch
alan
Comment 4 2018-07-24 20:43:03 PDT
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.
alan
Comment 5 2018-07-24 20:45:39 PDT
(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.
Dawei Fenton (:realdawei)
Comment 7 2018-07-25 10:10:16 PDT
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)
Comment 8 2018-07-25 10:18:44 PDT
(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)
Comment 9 2018-07-25 10:19:58 PDT
*** Bug 188007 has been marked as a duplicate of this bug. ***
Ryan Haddad
Comment 10 2018-07-25 12:35:18 PDT
*** Bug 188004 has been marked as a duplicate of this bug. ***
Simon Fraser (smfr)
Comment 11 2018-07-27 21:39:16 PDT
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)
Comment 12 2018-07-27 22:22:39 PDT
Re-landed in https://trac.webkit.org/changeset/234343/webkit with a fixed test.
Truitt Savell
Comment 14 2018-09-10 09:21:20 PDT
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) - ) - ) - ) - ) - ) -)
Note You need to log in before you can comment on or make changes to this bug.