Templates Plugins Courses

Browser Zoom Mapbox Gap


#1

If browser zoom level lower than 100%, mapbox doesn’t fill the screen as it should on page load. Going to 100% then back to a lower value resolves the issue. I am using MacOS and found the problem on Firefox and Chrome

The attached image shows the gap that is left below mapbox when chrome was set to 90%


#2

Hi @alex3,

Unfortunately, this problem is not reproducing on our side. Perhaps it could’ve happened just once. But in case you experience it over again, to solve this, first please make sure the plugin and the elements have been configured properly. If everything is ok, there should be no problems. Also, try check your browser settings as it might be an issue in browser itself. However, if the gap still appears, you can add our [email protected] account to your collaborators list in Settings -> Collaboration of your application. Additionally, please tell us the name of your app and page name where you are developing it, so we could investigate the problem inside it and provide a solution asap.

Note: Don’t pay attention to the alert message regarding Professional Plan, as we are an agency and you can easily add us to your collaborators list.

Best regards,
Alexandru


#3

Hello @alexandru.rusnac, if someone could take a look that would be much appreciated.

I have added the email you provided.

The page is called Vizyal and the page is also called Vizyal.

Let me know if you need any further information from me


#4

The page called Vizyal is now the Index


#5

Hi @alex3,

Thanks for sharing your app. We tested it and experienced the gap issue. To better understand and just for making things clear, this gap is just the background color of the index page. It is not reproduced by the Mapbox plugin. Visually, it seems to be a gap because of the floating footer with the image that is fixed. When zooming the browser page, this gap is going to appear anyway, it is just how it works. However, when placing and adjusting the Mapbox Map to the width and height of the page, it should produce no gaps on zoom. It could only happen vertically with zoom ~30% below it. So, the issue must be somewhere in the UI development of the app. We cannot guarantee working solutions on this matter, but you can try use header and footer as separate reusable elements and check what fixed elements stick together. Also, you can reach out to the Bubble community here https://forum.bubble.io/ that might be helpful. Thanks for understanding.

Best regards,
Alexandru