Blazor: Scrollbar Not Resetting on Page Change on Firefox

[wbaldoumas]

Is there an existing issue for this?

• [X] I have searched the existing issues

Describe the bug

When changing between pages of different sizes within a Blazor WebAssembly app, from a taller page to a shorter page, the scrollbar does not reset or resize while using Firefox if the user has scrolled on the larger page.

If the user has scrolled partway down the taller page, then navigates to a smaller page, the scrollbar grip disappears but the scrollbar track remains visible:

If the user has scrolled all the way down on the taller page, then navigates to a smaller page, both the scrollbar grip and track remain visible:

Expected Behavior

The scrollbar grip and scrollbar track should disappear when navigating from a taller page to a shorter page that shouldn't need a scrollbar.

Steps To Reproduce

1. Create a new Blazor WebAssembly project using the default template available in Visual Studio v17.4.1.
2. Add additional data to the sample-data/weather.json file in order to force the "Fetch data" page to be tall enough to produce a scrollbar on the /fetchdata page.
3. Run the application and then: a. Navigate to the /fetchdata page and scroll partway down, then navigate either the /counter or home page and observe that the scrollbar track remains visible. b. Navigate to the /fetchdata page and scroll all the way down, then navigate either the /counter or home page and observe that both the scrollbar grip and scrollbar track remain visible.

This is also reproducible at https://wbaldoumas.github.io/scrollbar-bug-demo/ (source here).

Exceptions (if any)

No response

.NET Version

7.0.100

Anything else?

Firefox version: 107.0

Output of dotnet --info:

.NET SDK:
 Version:   7.0.100
 Commit:    e12b7af219

Runtime Environment:
 OS Name:     Windows
 OS Version:  10.0.19044
 OS Platform: Windows
 RID:         win10-x64
 Base Path:   C:\Program Files\dotnet\sdk\7.0.100\

Host:
  Version:      7.0.0
  Architecture: x64
  Commit:       d099f075e4

.NET SDKs installed:
  7.0.100 [C:\Program Files\dotnet\sdk]

.NET runtimes installed:
  Microsoft.AspNetCore.App 6.0.11 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 7.0.0 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.NETCore.App 5.0.17 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 6.0.10 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 6.0.11 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 7.0.0 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.WindowsDesktop.App 5.0.17 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 6.0.10 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 6.0.11 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 7.0.0 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]

Other architectures found:
  x86   [C:\Program Files (x86)\dotnet]
    registered at [HKLM\SOFTWARE\dotnet\Setup\InstalledVersions\x86\InstallLocation]

Environment variables:
  Not set

global.json file:
  Not found

Learn more:
  https://aka.ms/dotnet/info

Download .NET:
  https://aka.ms/dotnet/download

[wbaldoumas]

One note is that if you remove scroll-behavior:smooth from bootstrap.min.css, this behavior with the scrollbar grip and scrollbar track not resetting/disappearing when navigating from taller pages to shorter pages after having scrolled isn't an issue. Maybe this is just a problem with the CSS included in the Blazor WebAssembly template?

[javiercn]

@wbaldoumas thanks for contacting us.

That seems to me like a bootstrap behavior.

Does this reproduce in other browsers? Does this reproduce in a document without blazor?

[ghost]

Hi @wbaldoumas. We have added the "Needs: Author Feedback" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[wbaldoumas]

@javiercn hey, thanks for the quick response!

Does this reproduce in other browsers?

This doesn't reproduce in other browsers like Edge, or Chrome. I don't have access to an OSX machine, so I haven't tested on Safari.

Does this reproduce in a document without blazor?

I haven't gotten a chance to test this out, but will when I can find some time. If you have a means to test that sooner, let me know how it goes. 😄

[ghost]

Hi @wbaldoumas. We have added the "Needs: Author Feedback" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[ghost]

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. If it is closed, feel free to comment when you are able to provide the additional information and we will re-investigate.

See our Issue Management Policies for more information.