Fix safari not properly rendering Terminal

[jeanp413]

Fixes #160070

Safari doesn't support device-pixel-content-box yet which is used by both webgl and canvas addons

[benz0li]

The problem was introduced with 852b4ae (Update to xterm 5) and 2f72682 (Add canvas renderer addon).

Cross reference: xtermjs/xterm.js#3271

ℹ️ Canvas rendering was working fine using Safari with VS Code v1.70.2 (xterm 4.20.0).

[benz0li]

1.71.0 (xterm v5.0.0 (beta 32))

This is the situation after reloading the page.

1.71.0.mp4

When starting a new Terminal, Safari falls back to the DOM renderer (see coder/code-server#5535 (comment)). But when reloading the page, there are some canvas renderer objects overlayed.

1.70.2 (xterm v4.20.0 (beta 20))

1.70.2.mp4

Safari uses the canvas renderer.

[Tyriar]

This is meant to be handled gracefully by just disabling the observer here:

https://github.com/silamon/xterm.js/blob/e8e2f16cffe89e9a08899a2a37c2a4cfa580cca9/src/browser/renderer/DevicePixelObserver.ts#L20-L25

Does something here throw on Safari or something?

[jeanp413]

@Tyriar yes it throws in this line observer.observe(element, { box: ['device-pixel-content-box'] } as any);

[Tyriar]

Oh ok, the right fix is to put a try/catch around that then. Can you want to send a PR to xterm.js instead?

[jeanp413]

Sure

[jeanp413]

Here xtermjs/xterm.js#4105

Closing this.

[jeanp413]

BTW @Tyriar will this be picked for the recovery release as is a regression from previous release? that was my main reason to fix it here instead 🙂

[Tyriar]

@jeanp413 yeah I guess this meets the bar for a recovery fix, I'll cherry pick this commit into a recovery release PR as it's a pain to update xterm in recovery releases.

[benz0li]

Thank you @jeanp413.

[Tyriar]

👉 #160332