AlphaFilter tanks performance in Safari on iOS 15

We’re building a digital whiteboard. We’ve been working on a pencil tool and we’d like to allow different opacities for the strokes. We were using an AlphaFilter to set the alpha so that we don’t get overlapping shapes from the stroke. This works well on most devices, but there is a severe performance impact on iOS 15. Things feel great on iOS 14.

Expected Behavior

You should be able to pan both documents around smoothly on iOS 15.

Current Behavior

The document with alpha has a lot of jank on iOS 15 devices.

Steps to Reproduce

Try panning by click dragging the documents.

Environment

• pixi.js version: 6.1.3
• Browser & Version: Safari
• OS & Version: iOS 15
• Running Example:
• with alpha: https://deploy-preview-1055--cloverapp.netlify.app/attasi/page/With-Alpha--0bb97aa1-247a-4ef7-8d1c-34b2ace2ee46
• no alpha: https://deploy-preview-1055--cloverapp.netlify.app/attasi/page/No-Alpha--4f4705ab-eaab-49c5-b63f-cd7755a310ed

[eXponenta]

WebKit has degradation on large framebuffers Because pixi create POT textures that by default can be a larger that screen size, this can affect. Than we know that iOS/MacOS devices use retina displays with resolution 2/3/3.5 that already produce huge renderable area (in pixels). https://bugs.webkit.org/show_bug.cgi?id=230973

[sbesh91]

I’m reasonably certain that I’ve run into this bug today with the launch of Safari 15.4. Safari and all iOS devices are unusable with an AlphaFilter in my use case. I’ve got two graphics inside of one container. The container has an AlphaFilter on it to allow me to simulate a fog of war effect where the vision of a game piece is automatically updated when they are moved.