Bug 141261

Summary: SVG animation is slow only when the SVG is the background of the <body>
Product: WebKit Reporter: Said Abou-Hallawa <sabouhallawa>
Component: SVGAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: simon.fraser, webkit-bug-importer, zimmermann
Priority: P2 Keywords: InRadar
Version: 528+ (Nightly build)   
Hardware: Unspecified   
OS: Unspecified   
Attachments:
Description Flags
svg-animation-body-background
none
svg-animation-div-background
none
svg-animation-img-src
none
svg-animation-body-background-height-500
none
svg-animation-body-background-height-1500
none
svg-animation-html-background
none
svg-animation-body-background-html-white none

Said Abou-Hallawa
Reported 2015-02-04 14:22:30 PST
Created attachment 246048 [details] svg-animation-body-background Open the attached test cases. Result: When the SVG is the the source of an <img> tag the animation is fast. When the SVG is the background of a <div> tag the animation is still fast but might be a little bit slower than the <img> case. But when the SVG is the background of the <body> tag, the animation is much slower than the other cases.
Attachments
svg-animation-body-background (2.00 KB, text/html)
2015-02-04 14:22 PST, Said Abou-Hallawa 		no flags
Details
svg-animation-div-background (2.01 KB, text/html)
2015-02-04 14:23 PST, Said Abou-Hallawa 		no flags
Details
svg-animation-img-src (1.75 KB, text/html)
2015-02-04 14:23 PST, Said Abou-Hallawa 		no flags
Details
svg-animation-body-background-height-500 (2.00 KB, text/html)
2015-02-04 14:49 PST, Said Abou-Hallawa 		no flags
Details
svg-animation-body-background-height-1500 (2.00 KB, text/html)
2015-02-04 14:49 PST, Said Abou-Hallawa 		no flags
Details
svg-animation-html-background (2.00 KB, text/html)
2015-02-04 15:06 PST, Said Abou-Hallawa 		no flags
Details
svg-animation-body-background-html-white (2.04 KB, text/html)
2015-02-04 15:11 PST, Said Abou-Hallawa 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Said Abou-Hallawa
Comment 1 2015-02-04 14:23:09 PST
Created attachment 246050 [details] svg-animation-div-background
Said Abou-Hallawa
Comment 2 2015-02-04 14:23:47 PST
Created attachment 246051 [details] svg-animation-img-src
Radar WebKit Bug Importer
Comment 3 2015-02-04 14:29:33 PST
<rdar://problem/19720996>
Simon Fraser (smfr)
Comment 4 2015-02-04 14:36:49 PST
The body background case is drawing twice (or more) because of tiling. Does it get faster if you reduce the body size?
Said Abou-Hallawa
Comment 5 2015-02-04 14:49:04 PST
Created attachment 246056 [details] svg-animation-body-background-height-500
Said Abou-Hallawa
Comment 6 2015-02-04 14:49:42 PST
Created attachment 246057 [details] svg-animation-body-background-height-1500
Said Abou-Hallawa
Comment 7 2015-02-04 14:51:38 PST
(In reply to comment #4) > The body background case is drawing twice (or more) because of tiling. Does > it get faster if you reduce the body size? No. If I reduce the body height, the image is drawn multiple times and if I increase it, the image is drawn only once. In all cases the animation is noticeably slow.
Simon Fraser (smfr)
Comment 8 2015-02-04 14:57:09 PST
So the body background is propagated to the root, so sizing the body has no effect unless you also give <html> some background style ("background: white") which does indeed speed things up.
Simon Fraser (smfr)
Comment 9 2015-02-04 14:57:27 PST
What's the perf when the SVG background is on <html> and the body has no style?
Said Abou-Hallawa
Comment 10 2015-02-04 15:06:34 PST
Created attachment 246058 [details] svg-animation-html-background
Said Abou-Hallawa
Comment 11 2015-02-04 15:08:21 PST
(In reply to comment #8) > So the body background is propagated to the root, so sizing the body has no > effect unless you also give <html> some background style ("background: > white") which does indeed speed things up. Yes setting the style html {"background: white"} was like a magic. Animation speed is really different.
Said Abou-Hallawa
Comment 12 2015-02-04 15:08:58 PST
(In reply to comment #9) > What's the perf when the SVG background is on <html> and the body has no > style? It is very slow in this case.
Said Abou-Hallawa
Comment 13 2015-02-04 15:11:37 PST
Created attachment 246059 [details] svg-animation-body-background-html-white
Simon Fraser (smfr)
Comment 14 2015-02-04 15:14:59 PST
You should figure out whether it's just a factor of the tiling area.
Note You need to log in before you can comment on or make changes to this bug.