When svg objects are partially offscreen, things slow way down on iPad

[samreid]

See parent issue:
phetsims/energy-skate-park-basics#160

@jbphet said

This was found on an iPad 2 running iOS 7.0.4. It was noticed when testing issue #142, and the screenshot below is similar to the test setup in that issue. When the skater is initially placed at the top of the track (upper right) or when the "Return Skater" button is pressed, the motion of the skater starts out as being chunky, then gets smooth over the majority of the track, and then gets chunky again when the skater nears the end of the track.

Over Skype, @jonathanolson said,

[I]s the skater css-transformed? if so remove and test. Is it still slow and it's SVG? Try Canvas and see if there's the same behavior.

[samreid]

The same problem can be observed simply by dragging the skater. When you drag him near/off an edge, the performance goes way down.

[samreid]

@jonathanolson suggested: the problem might be caused by the SVG clip currently applied for the entire screen region (for Scenes that don't take up the entire window, it matters for IE9)

I tried removing the clip region and it did not solve the problem. However, webgl makes this problem disappear.

[jessegreenberg]

We are able to observe this in energy-skate-park on iPad Air 2 iOS 12, when dragging the skater so that part of is off screen with WebGL disabled the framerate drops by ~50%. It would be helpful to investigate this again because we are trying to decide whether or not we can continue to develop energy-skate-park without custom WebGL work (see phetsims/energy-skate-park#42 (comment)). This is one of the last considerations that is preventing us from moving away from WebGL. If we can't remove WebGL we will either need to invest in broader WebGL support in scenery for text and shapes (high up front cost) or continue to add complex sim-specific WebGL code (high sim development and maintenance cost).

@ariel-phet can you please review and assign priority to this issue?

[ariel-phet]

@jessegreenberg is a potential solution to not allow the skater to be dragged off screen (which seems like a reasonable limitation)?

[jessegreenberg]

I should have been more clear, the issue isn't specific to dragging but any time the skater is partially off screen. So as the skater moves off screen on its own the framerate will drop from ~60fps to ~30fps when rendering with SVG.

[ariel-phet]

Marking for dev meeting

[zepumph]

From dev meeting discussion:

• SR what if we made the skater a specific renderer, like canvas or webgl
• JG we probably want to do it for all things that move off screen
• JG all the webgl needs to be in the same layer, so it would be nice if we could simplify that.
• JO: this may not be something we can even fix, because of mobile safari
• JG: perhaps the next step for this issue is to create a test case
• JG: the problem is much more noticeable when you add more things (not just the skater)
• JO: there isn't enough of a slowdown on desktop safari to be able to profile well.
• AP: perhaps ask QA/SR to look into trying to reproduce.

[jessegreenberg]

I found I was able to work around this in energy-skate-park by rendering one of the animating components (the bar graph) with 'canvas' while everything else uses 'svg'. Oddly enough, even when the skater is rendered with 'svg' the issue is no longer present.

It looks like we can workaround this in the sim so removing assignment from this issue again.

[jessegreenberg]

I am no longer seeing this in iOS 13 - In energy-skate-park if the skater and PieChartNode are rendered in SVG and dragged off screen, I don't notice a performance drop while partially out of screen anymore,.