# Firefox bugs on "playground"

**URL:** <https://talk.observablehq.com/t/firefox-bugs-on-playground/1432>\
**Category:** Uncategorized\
**Created:** [November 27, 2018, 7:03am UTC](https://talk.observablehq.com/t/firefox-bugs-on-playground/1432 "2018-11-27T07:03:57Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [November 27, 2018, 7:03am UTC](https://talk.observablehq.com/t/firefox-bugs-on-playground/1432/1 "2018-11-27T07:03:57Z")

</div>

[https://beta.observablehq.com/@observablehq/playground](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](http://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.

![07](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/0/028eff421c66d082141b04355f97ceaaf279574a.png)

![44](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/6/65661c6e1ab6778997d9d94d257b0e60913cae4d.jpeg)

(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.)

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [November 27, 2018, 3:51pm UTC](https://talk.observablehq.com/t/firefox-bugs-on-playground/1432/2 "2018-11-27T15:51:04Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![bgchen](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bgchen/32/784_2.png) [@bgchen](https://talk.observablehq.com/u/bgchen)\
**Post date:** [November 27, 2018, 4:23pm UTC](https://talk.observablehq.com/t/firefox-bugs-on-playground/1432/3 "2018-11-27T16:23:26Z")

</div>

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

> **[Observable](https://beta.observablehq.com/compare/bb2055d580bbbab2@58...264cc50b1027bf60@62)**
>
> A better way to code.

(I think “update” is more in line with the discussion around the “surprise cell” at the bottom of [“Introduction to HTML”](https://beta.observablehq.com/@mbostock/introduction-to-html))

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [November 27, 2018, 5:34pm UTC](https://talk.observablehq.com/t/firefox-bugs-on-playground/1432/4 "2018-11-27T17:34:18Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![bgchen](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bgchen/32/784_2.png) [@bgchen](https://talk.observablehq.com/u/bgchen)\
**Post date:** [November 27, 2018, 8:05pm UTC](https://talk.observablehq.com/t/firefox-bugs-on-playground/1432/5 "2018-11-27T20:05:34Z")

</div>

Thanks for setting me straight!

There does seem to be [some event functionality](https://developer.twitter.com/en/docs/twitter-for-websites/javascript-api/guides/javascript-api) in `twttr` but I haven’t managed to get it to work with Observable ([here’s a failed attempt in the newest version](https://beta.observablehq.com/d/264cc50b1027bf60) of my fork).