Bubble responsive engine causing fullscreen API to fail silently

Plugin builders
1

I’m making a mapbox plugin, and trying to allow users to make it fullscreen.

The fullscreen feature is provided by mapbox natively, made with the Fullscreen API.

The problem is, I can’t get the map into fullscreen when the page is not fixed width (responsiveness enabled). When the page is fixed width (no responsiveness), the map is able to be toggled into full screen.

I assume what’s causing the problem is when the browser tries to enter fullscreen, it updates the page width. Changing the page width is going to fire off many other functions Bubble uses for their responsiveness engine (even will cause the plugin update function to fire).

These events being fired are probably causing the fullscreen transition to fail, and without throwing any errors in console.

Check these examples.
Fixed Width
Not Fixed Width

I’ve already filed a bug report, and Bubble support recommended me to post here.

Not sure if someone has ran into this problem before, as I tried other plugins that use the fullscreen API and they worked.

Any ideas/workarounds would be appreciated.

1 Like
2

This is a very common pain with Bubble as @emmanuel could tell you. Me and several others have posted since a while back about the fullscreen issue. This also affects simple video plugins as you might imagine, that can’t go into fullscreen.

It’s definitely a bubble issue. Hope they can fix this soon.

Can you bypass bubble’s limitations and fire a fullscreen some other way?

3

I ended up using CSS to make the map fill the full width of the viewport. Not quite ideal, but it worked.

They didn’t seem interested in fixing it, and just recommended to use CSS.

There are JS event listeners for detecting when a request to make an element fullscreen is ran. I figured Bubble could use that event listener to “pause” their responsive engine when that event listener is triggered.

I tried setting up said fix myself, but couldn’t find Bubble’s page resize event listeners via code. You can turn off the default Bubble page resize event listener via the developer console, and the fullscreen mode suddenly works.

So the problem lies with the Bubble page resize event listener.

4

This is very concerning.

@emmanuel Can’t we at least get an update on when we can expect this to get fixed. It seems like a major pain point and this has been a know issue for a while.

If they could focus on this, I’m sure it could be fixed quickly!

1 Like