New issue
Advanced search Search tips

Issue 688243 link

Starred by 112 users

Issue metadata

Status: Duplicate
Merged: issue 666244
Owner: ----
Closed: Jul 2017
Components:
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 2
Type: Feature



Sign in to add a comment

Enable Hardware Acceleration on SVG DOM Nodes

Reported by sarah.dr...@gmail.com, Feb 3 2017

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.76 Safari/537.36

Steps to reproduce the problem:
http://s.codepen.io/sdras/debug/5894240a08bcdbc04a8cc79be0891fc9/

1. Create a CSS Animation with SVG
2. Apply a null Z transform hack
3. Check browser console under more tools > rendering > paint flashing, and all of the SVG DOM nodes are green rectangles

Check Firefox:
click the cog > highlight painted area (you'll see nothing)

What is the expected behavior?
SVG animation is more and more commonly used on websites and phones. Indeed, it's sometimes most performant graphic option. It would be a huge boon to developers if SVG DOM elements could hardware accelerated just like the HTML DOM

Firefox is already doing so, it would be great if Chrome could get on board

What went wrong?
Sometimes people even shy away from using SVG because of the lack of ability to hardware accelerate. This is a shame because SVG is an insanely powerful medium.

Did this work before? No 

Does this work in other browsers? Yes

Chrome version: 56.0.2924.76  Channel: n/a
OS Version: OS X 10.11.5
Flash Version: Shockwave Flash 24.0 r0

please help! I'll bake you cookies

 
YES PLEASE! It is increasingly being used for banner ads. Creative tools already excel at outputting them. They are extremely easy to animate with tools like Greensock. And the ease of production will outweigh any perceived performance issue. (Meaning all of your users will experience the brunt of the ad designers' decisions.)

Comment 2 by knee...@gmail.com, Feb 3 2017

Easily starred. With good SVG support in all major browsers it will be much easier to have a better UX within advanced web apps.

Comment 3 by diz...@gmail.com, Feb 3 2017

We really need this! SVG is important and make it fast matters.
As someone who's pushing SVG animation, I am running into performance bottlenecks quite often now. Any performance improvement/acceleration will be a huge boost for the web.  

Comment 5 by f...@opera.com, Feb 3 2017

Mergedinto: 666244
Status: Duplicate (was: Unconfirmed)

Comment 6 by yones...@gmail.com, Feb 3 2017

There is a huge community of us doing data visualization in the browser, which often requires animating a large number of nodes concurrently. Anything above a few hundred becomes choppy and so we often resort to the less expressive but more performant canvas. It would be immensely helpful if we could get the best of both worlds and deliver products that are easy to maintain and extend while still provide a good user experience. Thank you!
Curious to know if anyone tried
```
rect {
  --webkit--backface-visibility: visible;
  backface-visibility: visible;
}
```
Yes, it's there in the example demo
Thanks for being thorough. I appreciate it. (I should have been more when reading)

Comment 10 by f...@opera.com, Feb 5 2017

For people that starred (or are considering) this bug after comment-5, you should consider starring issue 666244 also (instead.) Thank you.
+1 for this.  would really be nice to match Firefox on this.
Labels: -Type-Bug PaintTeamTriaged-20170203 BugSource-User Type-Feature

Comment 13 by f...@opera.com, Jul 13 2017

Status: Available (was: Duplicate)
Initiating star-relocation attempt, stand by in 3... 2... 1...

Comment 14 by f...@opera.com, Jul 13 2017

Status: Duplicate (was: Available)
hahaha
Sorry, I know I'm such a pain. I just really need this, along with a host of other people.
1+ for this - TY
Huge SVG graphs could benefit a lot from this.
Please consider it especially for mobile devices.

Sign in to add a comment