discoverthreejs-site
discoverthreejs-site copied to clipboard
looeee
[BUG, ERROR] iFrames don't load on Firefox
Describe the bug I have to use Chrome to see the external content loaded in an iFrame throughout the book.
To Reproduce Steps to reproduce the behavior:
- Go to any page with an iFrame. Example: https://discoverthreejs.com/book/first-steps/textures-intro/
- Observe the demo for the head by Lee Perry-Smith doesn't load in Firefox but does in Chrome.
Desktop (please complete the following information):
- OS: Fedora Linux
- Browser Firefox
- Version 103.0.2 (64-bit)
Confirmed, thanks for the heads up.
I think this is caused by three.js examples switching to import maps which are not supported in Firefox. There's a polyfill but maybe it doesn't work in an iframe? If that's the case this could be tricky to fix.
It looks like import maps are on Mozilla's and mrdoob's radars.
Perhaps for now a simple banner at the start of the book recommending Chrome would be helpful for pointing readers in the right direction.
This comment points towards the fix: https://discourse.threejs.org/t/bug-importmap-isnt-suppored-by-firefox-and-safari/41716/4
Essentially, in Firefox the user has to navigate to about:config and set dom.importMaps.enabled to true. This solves the issue upon refreshing the page.
It's a bit of effort for the average user, but maybe a quick note at the beginning of the course would be useful.
I believe the issue still remains in Safari, but I don't have any Apple devices at the moment to test.
maybe a quick note at the beginning of the course would be useful.
Yeah that's a good idea. I will do this when I'm next doing updates (later this week hopefully).
In the longer term I want to stop referencing three.js examples as iframes, they break too easily. See https://github.com/looeee/discoverthreejs-site/issues/5