[iPad 2] Safari on iOS 9.3.5 takes unconventional creative liberties with SVG rendering

[jonathanolson]

Noted in phetsims/function-builder#35 and phetsims/projectile-motion#129.

Safari iOS appears to take an avant-garde approach clearing rectangles in SVG rendering:

In toeing the more conservative "don't look crazy buggy" line, we've handled this in the past by forcing sections (usually on top) to render in Canvas instead of SVG. This may affect performance, however.

Tracking instances of this bug (and how it was solved) here.

[jonathanolson]

In a fun turn of events, setting { layerSplit: true } on the projectile-motion CannonNode caused the cannon to somewhat animate with the projectile ONLY on iPad 2.

So presumably this bug can affect positioning/layout, not just clipping artifacts.

Proposed fix for projectile-motion is, again, setting something to render in Canvas.

[phet-steele]

phetsims/balancing-act/issues/70 also falls under this issue, and has shown similar problems in projectile-motion:

balancing-act:

[pixelzoom]

A variation of this problem was noted in Equality Explorer, see phetsims/equality-explorer#135. In the Operations screen, the bottoms of the operator radio buttons disappear when an operation is applied. The relevant code is UniversalOperationControl.js. See that issue for a video demonstration. Here's a screenshot:

[jessegreenberg]

This showed up again in coulombs-law, see #890, when the arrow buttons are disabled on the number controls, certain positions of the charges in the sim cause the arrows to be partially rendered, only in iOS 9.3.5. The problem went away with rootRenderer="canvas".