[Bug] Very slow, choppy performance of SVG compared to Chrome on same device (example included)

[psy0rz]

(This is an existing bug that unfortunately still exists: https://bugzilla.mozilla.org/show_bug.cgi?id=1289866 )

Visit this page on both Firefox nightly (fenix) and Chrome on Android: http://vallandingham.me/gates_bubbles/

Performance on Fenix is much slower.

I'm designing an online collaborate drawing tool, and Fenix is completely unusable compare to a smooth experience in Chrome. I know my application is pushing the limits sort of, so thats why I included the more simple example above. Alpha demo of our app: http://internet-paper.com/paper.html (sources https://github.com/psy0rz/etherpaint )

Try pinch-zooming on both Chrome and Fenix. Chrome has 10+fps vs Fenix <1fps.

The performance difference between the two are orders of magnitude.

Optimization tips or workarounds are welcome as well. (we're going to use simplyjs to reduce the polylines)

• Android device: LG Velvet
• Fenix version: Nightly 201224 17:00

┆Issue is synchronized with this Jira Task

[psy0rz]

I also tried remote performance analyzing the regular Firefox on Android via remote USB: It shows 80% idle while it also shows almost 0fps. So everything seems fast enough, yet for some reason its not.

[Dunexus]

Hello,
Do you have webrender enabled ?

I tried on Oneplus 5T (Android 10) with webrender enabled and it is quite smooth.

[sheikh-azharuddin]

Seems malicious ads and webpages embedded in the link

Careful guys

[MicroBeast]

That's not coming from any links from OP.

[psy0rz]

Seems malicious ads and webpages embedded in the link

Careful guys

I assure you, that shouldnt come from my html code. Or it should be from one of the external assets which i highly doubt. (in the current masterbranch the assets are hosted locally from now on)

However i see that the server has crashed as well, so i'll investigate that.

Update: It was just a known racecondition.

[psy0rz]

Hello,
Do you have webrender enabled ?

I tried on Oneplus 5T (Android 10) with webrender enabled and it is quite smooth.

I first had to find out how to able it and how to get to about:config (available in Firefox beta only for some reason).

Then i checked about:support on Fenix to discover that compositing already was WebRender on my Fenix by default.

But still zooming on http://internet-paper.com/paper.html is super slow. (and even if it wasnt: telling our users to enable some option via about:config is not a long term solution offcourse)

For now we have to tell our users that Firefox mobile isn't supported and they have to use something else. Fenix still seems a long way out and i'm afraid this issue will never get fixed anyway. The original bug report at https://bugzilla.mozilla.org/show_bug.cgi?id=1289866 was 5 years ago..

[sheikh-azharuddin]

Page redirecting to suspicious sites...
Just zoom in the page...click on empty grid on right hand side..it is showing. @MicroBeast

[sheikh-azharuddin]

Hello,
Do you have webrender enabled ?

I tried on Oneplus 5T (Android 10) with webrender enabled and it is quite smooth.

How to enable webrender...I mean I enabled GFX.webrender.all to true but still zooming in and out too slow..it is faster in chrome

[psy0rz]

Thanks for confirming the slowness.

I still don't understand whats happening with that redirect. I think its your phone or network perhaps. Also check my github profile to assure yourself that i have nothing to gain from redirecting to some lame spam site.

Keep in mind the connection to that site is not encrypted yet, so something along the way could be inserting ads as well.

[psy0rz]

Since its XMAS i fiddled some more to pinpoint the problem and allow better test comparisons :)

http://internet-paper.com/svgtest.html

This actually crashes firefox on the desktop and mobile, but runs pretty ok on Chromium. By scaling down some numbers you can get it to run. (orders of magnitude slower than chrome)

What it does is:

• Draw 200 random polylines with 200 segments each with a max size of 10000x10000. (no problems here)
• Randomly zoom and pan, inside an animation frame.
• Display the time difference between the animation frames. (16ms on a 60hz monitor = perfect)

It seems viewbox zoom is much faster than element resizing, so I will use that from now on. It also seems nesting svg's makes things slower, so i'll try and see if I can remove that as well.

The good news is most things on firefox are fast enough, just zooming/panning is a problem.

Since i need to optimize for performance anyway, i might post some more info later.

I hope this helps to track down the bottleneck.

Edwin

[sheikh-azharuddin]

Thanks for confirming the slowness.

I still don't understand whats happening with that redirect. I think its your phone or network perhaps. Also check my github profile to assure yourself that i have nothing to gain from redirecting to some lame spam site.

Keep in mind the connection to that site is not encrypted yet, so something along the way could be inserting ads as well.

Might be bro...first time I got this error with this page..seems someone injected something

[psy0rz]

update: it doesnt crash, it just eats 10Gb of memory and then hits the OOM killer.

[psy0rz]

I changed the zoom to be as simple a possible, only an SVG element and viewbox zooming: https://draw.cafe/svgtest2.html

The firefox variants only seem to be slower with this specific set of circumstances. They are orders of magnitude slower when the polygons have very long segments.

All and all much faster and hopefully acceptable for our use case.

TLDR

• huge polygons have slow viewbox zooming compared to chrome.
• zooming by resizing the element instead of a viewbox zoom can be catastrophic. (while still smooth on chrome)
• tested with firefox android/firefox beta android/fenix/firefox desktop on ubuntu 20.

[mcomella]

Thanks for reporting – our platform performance team works on Bugzilla so we'll refile the issue there to get someone to look into it. Sorry for the delay in responding to the issue (due to the holiday).

[mcomella]

Moved to bugzilla: https://bugzilla.mozilla.org/show_bug.cgi?id=1686590

Change performed by the Move to Bugzilla add-on.

[psy0rz]

Wait what??

The original bug WAS on mozilla and moved from https://bugzilla.mozilla.org/show_bug.cgi?id=1289866 TO github:

We have completed our launch of our new Firefox on Android. The development of the new versions use GitHub for issue tracking. If the bug report still reproduces in a current version of Firefox on Android nightly an issue can be reported at the Fenix GitHub project. If you want to discuss your report please use Mozilla's chat server https://chat.mozilla.org and join the #fenix channel.

Now you've moved it to mozilla again?