Bug 141261 - SVG animation is slow only when the SVG is the background of the <body>
Summary: SVG animation is slow only when the SVG is the background of the <body>
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: SVG (show other bugs)
Version: 528+ (Nightly build)
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2015-02-04 14:22 PST by Said Abou-Hallawa
Modified: 2015-02-04 15:14 PST (History)
3 users (show)

See Also:

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 an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Said Abou-Hallawa 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.
Comment 1 Said Abou-Hallawa 2015-02-04 14:23:09 PST 
Created attachment 246050 [details]
svg-animation-div-background
Comment 2 Said Abou-Hallawa 2015-02-04 14:23:47 PST 
Created attachment 246051 [details]
svg-animation-img-src
Comment 3 Radar WebKit Bug Importer 2015-02-04 14:29:33 PST 
<rdar://problem/19720996>
Comment 4 Simon Fraser (smfr) 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?
Comment 5 Said Abou-Hallawa 2015-02-04 14:49:04 PST 
Created attachment 246056 [details]
svg-animation-body-background-height-500
Comment 6 Said Abou-Hallawa 2015-02-04 14:49:42 PST 
Created attachment 246057 [details]
svg-animation-body-background-height-1500
Comment 7 Said Abou-Hallawa 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.
Comment 8 Simon Fraser (smfr) 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.
Comment 9 Simon Fraser (smfr) 2015-02-04 14:57:27 PST 
What's the perf when the SVG background is on <html> and the body has no style?
Comment 10 Said Abou-Hallawa 2015-02-04 15:06:34 PST 
Created attachment 246058 [details]
svg-animation-html-background
Comment 11 Said Abou-Hallawa 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.
Comment 12 Said Abou-Hallawa 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.
Comment 13 Said Abou-Hallawa 2015-02-04 15:11:37 PST 
Created attachment 246059 [details]
svg-animation-body-background-html-white
Comment 14 Simon Fraser (smfr) 2015-02-04 15:14:59 PST 
You should figure out whether it's just a factor of the tiling area.