Mitigate iOS OOM crashes

[rganchev]

• Investigation showed that the crashes on mobile Safari were caused by the CSS transform being applied to the whole DOM container that contains all tapestry elements. This causes Safari to generate huge GPU textures (hundreds of MB) for its drawing layers and at some point it runs out of memory.
• CSS transformations are now applied to each tapestry element separately. This has the following effects:
  • GPU textures are much smaller. OOMs still can occur in large tapestries but are much rarer than before.
  • CPU usage is higher, because the browser now needs to calculate multiple transformation matrices on each layout.
  • Moving the CSS transformations messed up the stacking contexts so I had to adjust some z-indexes to arrange the UI.

[Sachanski]

If you feel like it, you can clean up some workarounds that were put in previous attempts to tackle this issue:

• client/src/pages/tapestry/styles.module.css - .hidden applied to the pixi container for the presentation
• core-client/src/components/tapestry/items/pdf/styles.module.css - &.interactive's overflow: auto can now be always applied. This will leave to a better UX, since right now if the user scrolls a pdf to some point and deactivates it, the document is scrolled to the top.
• core-client/src/components/tapestry/items/text/styles.module.css - this should be similar to the above, only for text boxes
• core-client/src/components/tapestry/items/video/player.tsx - the MediaPlayer is set to display: none for layering purposes, although I don't think this causes oddities in the UX
• viewer/src/index.css - there is a will-change: transform there that can probably be removed

[rganchev]

@Sachanski I will consider these changes in a follow-up PR. I have tried them locally, but some of them re-introduce other Safari layering problems and need to be examined carefully.