1504607 - Wrong visualisation of with additional scroll bars in Microsoft Power BI

Status: RESOLVED INCOMPLETE

(Web Compatibility :: Site Reports, defect)

Description

[Bastian]

Attachment: Wrong and Correct Visualtisation.PNG

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:63.0) Gecko/20100101 Firefox/63.0

Steps to reproduce:

Create a Microsoft Power BI Report with Table visualisation.
I already created a Ticket for Microsoft Power BI.
Thex told me that it is a Problem with Firefox, because in Chrome and Edge Browser it is working correctly.
Thier solution was to switch to Chrome or Edge, but I wanna use firefox. 


Actual results:

Multiple scroll bars in visuals (see attached files)


Expected results:

only one scroll bars (see attached files)

Comment 1

[Rares Doghi, Desktop QA]

Hi, I cant seem to be able to register to Microsoft with a personal email and I cannot create the table visualization, but I will set the component for this issue to Panning and Zooming.

Bastian, can you please try our latest Nightly and recheck if the issue occurs there as well? you can find the build here: https://nightly.mozilla.org/ .

Comment 2

[Botond Ballo [:botond]]

If the issue does reproduce with Nightly, one thing that might be helpful is to do a "File -> Save Page As -> Web Page, complete", zip up the files and attach them here. Hopefully that allows us to reproduce the issue on the saved page, without having to try to get an account that can access this functionality.

Comment 3

[Bastian]

Attachment: Firefox Nightly_Power BI.html

Comment 4

[Bastian]

I have tested under nightly, but the issue is still there. the file is attached

Comment 5

[daniel.penafielc]

I have a pro account and i can help with test in order to solve this.

Comment 6

[Bastian]

Hi Daniel, do you have the same problem with the visualizaitons?

Comment 7

[Kartikaya Gupta (email:[e-mail])]

From the screenshot this looks like a layout-side problem. It's making things scrollable when presumably the content should fit in the allocated space so as to not trigger overflow.

Comment 8

[rolf]

On the PowerBI forum: https://community.powerbi.com/t5/Issues/multiple-scrollbars-in-firefox/idc-p/573492/highlight/true#M35437

"Fix will be deployed on 12/07. We are using an experimental CSS attribute for Firefox, it requires a user settings."

Setting layout.css.scrollbar-width.enabled to true in about:config seems to fix it. (For me at least, Firefox 63.0.3 on Ubuntu 18.04.1)

Comment 9

[michal.kolar]

Hi guys, the fix is still not available. I am not able to identify who can or cannot fix this problem so I commented both threads (Mozilla and PowerBI), hoping for someone responsible to take action.

Comment 10

[Kartikaya Gupta (email:[e-mail])]

Which PowerBI thread did you post on? The last comment in the thread linked in comment 8 seems to be from 2018. At any rate, the layout.css.scrollbar-width.enabled pref is true by default now (and has been for a while) so there must be some other problem causing this now if it's still happening.

Comment 11

[michal.kolar]

I have posted to this topic:
https://community.powerbi.com/t5/Service/Weird-scrollbars-in-PBI-Service/m-p/570433/highlight/false#M57839
There are more of them there, complaining about the same issue.

I confirm that layout.css.scrollbar-width.enabled pref is by default true.
I am using a freshly installed PC (Win10) with the latest FF version downloaded and installed, yet the problem is not solved. My colleagues around have the same experience.

Comment 12

[Kartikaya Gupta (email:[e-mail])]

Can you follow the instructions from comment 2 to save a copy of the page? I don't have access to PowerBI so without a standalone test case it's going to be hard to fix.

Comment 13

[Botond Ballo [:botond]]

(In reply to Kartikaya Gupta (email:[e-mail]) from comment #12)

Can you follow the instructions from comment 2 to save a copy of the page? I don't have access to PowerBI so without a standalone test case it's going to be hard to fix.

Note, the attachment from comment 3 does seem to function somewhat as a standalone test case. It's a bit messy due to what I'm guessing is some missing CSS, but if you open it in both Firefox and Chrome, and scroll down to the part where there's a table with cells highlighted in green and red (partially obscured by a graph, I'm guessing due to the missing CSS; ignore that), the first column of that table (titled "Kanal Gruppe") is scrollable in both Firefox and Chrome, but only Firefox renders scrollbars for it.

Comment 14

[michal.kolar]

Attachment: Chrome.png

Page rendering in Chrome

Comment 15

[michal.kolar]

Attachment: FF.png

Page rendering in FF

Comment 16

[michal.kolar]

Attachment: Scrollbars_20191523_FF67_64bit.zip

Packed problematic page

Comment 17

[michal.kolar]

OK I have uploaded the packed webpage (Scrollbars_2019523_FF67_64bit.zip) as well as the correct rendering (Chrome.PNG) and the wrong rendering (FF.PNG).
I tried some more browsers (Chrome, Edge, IE10, Safari), they all look good.

Comment 18

[Kartikaya Gupta (email:[e-mail])]

(In reply to michal.kolar from comment #17)

OK I have uploaded the packed webpage (Scrollbars_2019523_FF67_64bit.zip) as well as the correct rendering (Chrome.PNG) and the wrong rendering (FF.PNG).

Thanks! Unfortunately when I load the packed page it doesn't really load properly. I suspect the page is too dynamic to be properly saved by the browser's "save as" feature. :(

(In reply to Botond Ballo [:botond] from comment #13)

Note, the attachment from comment 3 does seem to function somewhat as a standalone test case. It's a bit messy due to what I'm guessing is some missing CSS, but if you open it in both Firefox and Chrome, and scroll down to the part where there's a table with cells highlighted in green and red (partially obscured by a graph, I'm guessing due to the missing CSS; ignore that), the first column of that table (titled "Kanal Gruppe") is scrollable in both Firefox and Chrome, but only Firefox renders scrollbars for it.

I looked at this attachment a bit. Note that this predates the supposed change that microsoft made, so it's unclear to me if the problem on this page is the same as what is currently happening in the latest version. However, this saved page does reproduce a problem, so it's worth fixing, and maybe it will fix the problem on the latest version of the page.

I inspected one of the problematic scrollbars (for <div class="rowHeaders">, which is just below the "Kanal Gruppe" text and has the text "01 TV Heroes"). In Chrome that div has an offsetWidth of 180px, with the clientWidth and scrollWidth being 165px. The rightmost 15px, which contain the scrollbar, are hidden by virtue of being under the div to the right of it. In Firefox, the div has an offsetWidth and scrollWidth of 165px, and a clientWidth of 150px. So for some reason the layout properties are coming out narrower such that the scrollbar is still visible instead of being truncated off to the right.

I'm not too sure of the steps that are involved in computing the layout widths, so moving this over to layout proper where hopefully somebody will know what's going on.

Comment 19

[Emilio Cobos Álvarez (:emilio)]

Bug 1548155 looks like a similar interop issue, fwiw.

Comment 20

[Botond Ballo [:botond]]

Attachment: Reduced testcase

If it helps, here's a reduced testcase.

In Chrome, only the blue/yellow div renders a vertical scrollbar, and neither div renders a horizontal scrollbar.

In Firefox, both divs render horizontal and vertical scrollbars.

Comment 21

[BugBot [:suhaib / :marco/ :calixte]]

The priority flag is not set for this bug.
:jwatt, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 22

[Ksenia Berezina [:ksenia]]

Hi James, could you please file a separate bug based on the testcase in comment 20?

Comment 23

[James Graham [:jgraham]]

I've moved the testcase from this bug into another bug, but since we think there's little chance of reproducing the original issue we're going to close this and wait for more reports of sites being broken due to scrollbar differences before opening a knowledge base entry.