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

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.