Office-js: Word add-in has horizontal scrollbar on Firefox on Windows

[morgan-tr]

When loading a Word add-in in Firefox on Windows, there is a horizontal scrollbar.

Expected Behavior

The expectation is that there won't be a horizontal scrollbar.

Current Behavior

A horizontal scrollbar appears when opening an add-in in Firefox on Windows.

Steps to Reproduce, or Live Example

1. Open a document on One Drive in Firefox on Windows 10
2. Install the Script Lab add-in
3. Open the add-in
4. You'll see a horizontal scrollbar at the bottom of the add-in.

Context

The same issue with the horizontal scrollbar on Firefox happens in our add-in as well. This negatively affects the user experience. The horizontal scrollbar takes up space, is unnecessary, and confusing.

Your Environment

• Platform: Office Online
• Host: Word
• Office version number: Office 365
• Operating System: Windows 10
• Browser: Firefox

Useful logs

[AbidRahman-MSFT]

Hey Morgan, thanks for reporting this issue. I was able to reproduce it following your steps and a bug has been logged in our backlog.

[morgan-tr]

Thanks for the update!

[calbrecht]

This bug manifests, and is easily fixed in

Windows 10: Edge, Firefox
MacOS Catalina: Safari, Firefox
Linux: Firefox

The fix is to give the immediate parent div.AppsForOfficeReactContainer of the taskpane iframe the display: flex css property.

In WordEditorWithCloudFonts.css

div.AppsForOfficeReactContainer {
  height: 100%;
  display: flex;
}

This fix does not break the correct rendering in Chrome and Chromium on any platform.

[calbrecht]

@AbidRahman-MSFT, how long will this take to land in production?

[vschaeidt]

With the new Edge Browser Release (Version 83.0.478.54) on Windows, the Scrollbar has disappeared in the Browser (Edge), as well as the Word client.

So the Issue does just remain on FireFox, Safari, and the Word client on MacOS.