bug(screen): computeFit removes document body scroll behavior

[kamranayub]

Steps to Reproduce

Use one of the ex.DisplayMode options that needs to call Screen._computeFit (like FitScreen or FillScreen).

Expected Result

The document can still be scrolled properly.

Actual Result

_computeFit mutates the style properties of the body element:

    document.body.style.margin = '0px';
    document.body.style.overflow = 'hidden';

This causes the document to not scroll anymore. I don't think we noticed this because you don't "typically" have Excalibur on a scrollable page, but for #2793 I noticed this as we embed Excalibur within the docs.

Environment

• browsers and versions: Chrome 117
• operating system: Windows 11
• Excalibur versions: 0.28.0
• (anything else that may be relevant)

Current Workaround

For now I am using Fixed display mode.

[kamranayub]

It might be useful, not only to avoid this, but to allow more support for multiple Engine on the page, to set a container to use.

For example, using react-frame-component, it would let us specify the iFrame document:

const { document } = useFrame();

//...

new Engine({ getContainer: () => document })

This wouldn't solve other global pollution issues (#87) though, like setting window.__EXCALIBUR_DEV_TOOLS etc.

If we can rewrite computeFit methods to not mutate anything, though, that's ideal.

[github-actions[bot]]

This issue hasn't had any recent activity lately and is being marked as stale automatically.