Matterport 3D tours not working - Firefox only
We produce Matterport 3D virtual tours. Up till now, we have been able to embed the tours on our, and client sites, and they play on-page with no issue.
We have discovered that our spaces, when embedded on a webpage, dont work in Firefox and get a ‘oops, model not available’ error.
They all work if the page is loaded in safari.
We are using this code to embed which has always worked up till now:
The actual straight URL works in Firefox - just not the embedded ones.
Matterport claim that they wont work if 2 or more are embedded on a page, which seems odd since: - this only just started happening - it doesnt happen in browsers other than firefox - some people (rarely) dont have the issue even in Firefox
Here is an example of a page with the tours embedded, having the issue in Firefox: https://www.unicol.unimelb.edu.au/about-us/gallery/virtual-tours/
Thanks Ben
Chosen solution
I tested in Firefox 72 and there it works with the same default pref setting. You can consider to file a bug report to see whether this is a regression that should be fixed since this worked in previous Firefox versions.
Read this answer in context 👍 1All Replies (8)
WebGL is the Javascript API library used by Firefox (and other browsers) to render 2D and 3D graphics. To prevent the browser from slowing down or crashing, Firefox has a hard limit of maximum 16 WebGL contexts and then it will stop them from working.
The long and the short of it is that Matterport is correct; You have too many 3D tours embedded on a single page. Their recommendation of a maximum of 1 per page is a good idea. Actually, when I originally visited the website on my computer, it crashed Firefox.
My recommendation to you is to replace the embedded frames with a image that, when clicked, will open the Matterport 3D tour in a new tab. This means would be able to keep the same number of listing on that main page, but it wouldn't cause this issue.
The code would be fairly simple. It would be something like below:
<a href="https://my.matterport.com/show/?m=6By4dFjpWL2&brand=0" target="_blank"> <img src="PATH_TO_THUMBNAIL_IMAGE"> </a>
As a side note, most other browsers have similar restrictions. For example, Google Chrome's core (Chromium) also has a 16 WebGL limit. You will also find that mobile browsers often have a far lower limit due to the decreased computing power.
Hope this helps.
Modified by Wesley Branton
Thanks for your reply.
Why is it that it doesn't happen all the time.
For example it doesn't seem to here:
Modified by Ben Lopez
There are 17 tours on the page in the first link. Changing this pref from 16 to 17 makes it working in that case:
- webgl.max-contexts-per-principal = 17
Close and restart Firefox after modifying the setting for changes to take effect
Modified by cor-el
Hi cor-el Thanks for that - is that a firefox user setting or is it at the website end? Ben
That is a Firefox setting on the about:config page.
You only have one tour too many on that page, so another possibility is to spread these 17 tours across two pages.
Chosen Solution
I tested in Firefox 72 and there it works with the same default pref setting. You can consider to file a bug report to see whether this is a regression that should be fixed since this worked in previous Firefox versions.
cor-el said
I tested in Firefox 72 and there it works with the same default pref setting. You can consider to file a bug report to see whether this is a regression that should be fixed since this worked in previous Firefox versions.
Thank you.
Hi cor-el - forgive me, but how do I go about lodging it as a bug report?