Forum Academy Marketplace Showcase Pricing Features

Strange space left by hidden scrollbar

Hi Bubblers,

I have a render issue on my app. I want to remove the scrollbar for the main page. I am using the HTML element for that. Here is the code I used to hide it

So it is working correctly on all browsers except one: mozilla firefox.
When I click on a link redirecting to my app from an email I get this strange UI behavior. The scrollbar disappear but it leaves its width as empty space.
But if I connect directly on my app page or I use the preview/run as button from my app editor, I do not have this behavior

You can use this code

<style type="text/css">
#noscrollbar::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}
#noscrollbar::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
#noscrollbar::-webkit-scrollbar-thumb {
  background: transparent;
  border: 0px none;
  border-radius: 0px;
}
#noscrollbar::-webkit-scrollbar-thumb:hover {
  background: transparent;
}
#noscrollbar::-webkit-scrollbar-thumb:active {
  background: transparent;
}
#noscrollbar::-webkit-scrollbar-track {
  background: transparent;
  border: 0px none;
  border-radius: 0px;
}
#noscrollbar::-webkit-scrollbar-track:hover {
  background: transparent;
}
#noscrollbar::-webkit-scrollbar-track:active {
  background: transparent;
}
#noscrollbar::-webkit-scrollbar-corner {
  background: transparent;
}

/* Thin Scrollbar */
#noscrollbar{
  scrollbar-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) !important;
  scrollbar-width: none !important;
}

</style>

Thanks for the code but it is not working when I click on the link.
I think I already tried your solution from another post.
I replaced noscrollbar by mainpage

The code is not a link, it is something to copy and paste into an html element. Also your scroll bar is not on your page, it’s on a group. Likely you have the setting to allow vertical scroll bar on overflow for that group.

I pasted the code into the html. When I say link, it is the link that my users receive in the email. Because the issue happens by following the link from the email.
The group is the main page, how do I remove the “allow vertical scrollbar” to that group.
BTW, I cannot use the new beta engine because it messes up my entire app as it is a single page app

In that case you don’t have that allow vertical scrollbar.

Being on the old responsive engine does make that issue occur especially when a user is changing the width of the page. The new responsive engine doesn’t have the same issue.

What is really strange is that behaviour started a week ago and it is only happening on Mozilla Firefox…