WebR chunks not working with Safari browser

[DanielEWeeks]

Having WebR interactive R chunks in a Quarto document is so very wonderful!

However, I'm wondering if you might have any insight/comments on why those chunks don't work in the Safari browser?

For a detailed example, see this issue:

hrbrmstr/2023-nyr-webr#1

Thank you,
Dan Weeks

[coatless]

At first glance, this looks like #8 (comment) since Bob is using an iframe trick to embed the code area inside of a slide deck (not 100% supported at the moment, c.f. #14). Chrome uses "credentialless" iframes that other browsers are working toward adopting, c.f. mozilla/standards-positions#628 and Apples' WebKit.

[DanielEWeeks]

Ran into the same Safari issue previously when trying out WebR chunks in a Quarto book (https://danieleweeks.github.io/HuGen2071/webR_test.html), but thought maybe that was because GitHub.io might not yet allow Cross-Origin-Resource-Policy headers. But it also doesn't work at https://hugen2071.netlify.app/webr_test where I think I have implemented the headers correctly.

The code for the example "WebR - R in the web browser" chapter is simple (https://github.com/DanielEWeeks/HuGen2071/blob/main/webR_test.qmd) with no iframe tricks:

---
title: WebR - R in the web browser
webr:
  packages: ['ggplot2']
---

This is a WebR-enabled code cell in a Quarto HTML document which works when viewed in a Chrome browser.

``` {webr-r}
# Edit/add code here
fit = lm(mpg ~ am, data = mtcars)
summary(fit)
    ```

[coatless]

Hmm, that's a perfect MWE! Glancing at the inside from Safari, I'm seeing:

From the output, Safari is unhappy with the Monaco editor that should display the code. We switched from CodeMirror over to Monaco in 0.2.0 to potentially solve the re-scaling issue with revealjs and address accessibility issues with screen readers.

Maybe a quick fix for you would be to revert back to v0.1.0 (last version of CodeMirror) by running in the Terminal tab of RStudio:

quarto add coatless/[email protected]

Switching back to the problem at hand... I was able to replicate this problem, but with just a refresh the code cell simply "works" as shown in the following GIF:

As a result, two things come to my mind:

1. There might be an issue with the event hook that hasn't been resolved in Safari:

"ResizeObserver loop completed with undelivered notifications."

2. Safari is looking for the Monaco editor in the wrong location, c.f.

"Failed to load resource: the server responded with a status of 404 ()"
https://danieleweeks.github.io/HuGen2071/vs/editor/editor.main.js

One of the odd things is if you refresh the page in Safari, it loads the Monaco editor.

@jooyoungseo have you ever experienced any of these issues with Monaco?

[jooyoungseo]

@coatless -- I have no idea off the top of my head. Maybe, we can try with the latest Monaco, 0.39.0. I used v0.31.0. If we upgrade it to the latest Monaco, the code cell execution keybindings (Shift+Enter, Ctrl+Enter) may not work and we need to fix that later.

[coatless]

@jooyoungseo No worries. I'll spend some time debugging further if the Monaco upgrade doesn't address the reload requirement. Glancing at the Monaco page, let's aim to use Monaco at 0.40.0 instead of 0.39.0.

[jooyoungseo]

@coatless Awesome! Thanks! I will test the accessibility again once you upgrade Monaco to 0.40.0. :)

[DanielEWeeks]

Just verifying that reverting back, as suggested, to v0.1.0 (last version of CodeMirror) makes the WebR chunk on this web page

https://danieleweeks.github.io/HuGen2071/webR_test.html

work perfectly within the Safari browser.

Thank you!

[coatless]

@DanielEWeeks should be fixed now. Feel free to use:

quarto add coatless/[email protected]