🏠 back to Observable

Firefox bugs on "playground"


#1

https://beta.observablehq.com/@observablehq/playground has 3 issues with Firefox (63.0.3) + uBlock Origin.

  1. uBlock Origin blocks the call to vega.github.io, resulting in NetworkError when attempting to fetch resource.

  2. uBlock Origin AND native Firefox tracker protection block the call to the https://platform.twitter.com/widgets.js tracker

  3. the twtter thing is visually broken.

(Would it be a good idea to add a category “Feedback on notebooks” in this forum?)
(I can reconfigure my browser, but since this is a notebook intended to welcome beginners, it suppose it ought to work for everyone, as much as possible.)


#2

Not much I can do much about an extension that blocks GitHub Pages in its entirety.

Likewise, I’m able to reproduce the height bug with Firefox, but given that Firefox doesn’t support ResizeObserver yet and the Twitter API is resolving the promise before the tweet has loaded, I don’t see a good solution.


#3

Dispatching an “input” “update” event to the cell gets around the height bug on firefox (at least for me):

(I think “update” is more in line with the discussion around the “surprise cell” at the bottom of “Introduction to HTML”)


#4

That fix isn’t reliable for me, unfortunately. It works some of the time, but there appears to be a race condition where the tweet may load asynchronously after the promise is resolved (and after a subsequent animation frame), and thus the computed height is still wrong.

Also, that tutorial is slightly out of date. We now fallback to MutationObserver for browsers that don’t support ResizeObserver, so it’s almost never necessary to tell the runtime to recompute heights explicitly. And, if you do, it’s better to dispatch a load event rather than an update event. (The update event is used internally to indicate when a cell’s value changes, and the reason it worked in your fix is that it had the side-effect of mutating the DOM and triggering the MutationObserver after a requestAnimationFrame.)

I think the reason that MutationObserver may not be working here is that the Twitter widget uses shadow DOM, so its internal mutations are possibly not visible. And given that it doesn’t seem to be dispatching any sort of event when it loads, we’re possibly out of luck.


#5

Thanks for setting me straight!

There does seem to be some event functionality in twttr but I haven’t managed to get it to work with Observable (here’s a failed attempt in the newest version of my fork).