Open Bug 1518825 Opened 2 years ago Updated 2 years ago

Scroll bar obstructs the Bing map when the traffic view is selected


(Web Compatibility :: Desktop, defect, P1)



(firefox64 affected, firefox65 affected, firefox66 affected)

Tracking Status
firefox64 --- affected
firefox65 --- affected
firefox66 --- affected


(Reporter: dcicas, Unassigned)


(Keywords: webcompat:site-wait, Whiteboard: [sitewait])


(1 file)

Attached image Image of the bug

[Affected versions]:

  • Firefox Latest Nightly 66.0a1
  • Firefox Beta 65.0b9
  • Firefox Release 64.0

[Affected platforms]:

  • Win 7 x64
  • Win 10 x64

[Steps to reproduce]:

  1. Reach
  2. Click on the traffic button.
  3. Select the aerial mode.

[Expected result]:

  • No element obstructs the map.

[Actual result]:

  • There is a scroll bar in the middle of the screen.

[Regression range]:

  • Will investigate as soon as possible.
Flags: needinfo?(daniel.cicas)

This is basically a site bug.

They explicitly ask for this scrollbar -- they style the element in question with:

.noScroll {
   overflow-y: scroll;

And then in Chrome and Edge, they hide the scrollbar by setting a negative "margin-right". It looks like this:

<div class="panelWrapper multi left noScroll" style="margin-right: -17px;">

This ends up clipping the scrollbar, because this element's parent has overflow:hidden, so it hides the negative-margin-area on its child (which is the child's scrollbar area).

But in Firefox, they give this element "margin-right: 0px". On Linux, that's fine because scroll tracks are transparent (and maybe they're trying to use 0px for that "we figured out that scroll tracks are transparent" scenario?) But on Windows, scroll tracks are not transparent, so they need to give us a similar margin-right bump that they're giving to Chrome in order to hide the scrollbar.

Component: Layout → Desktop
Product: Core → Tech Evangelism

I can also reproduce the issue on Chrome dev73.0.3642.0 Windows10 sometimes.

Adam, can we reach out to microsoft on this one please?

Flags: needinfo?(astevenson)
Priority: -- → P1

Reaching out to Microsoft via partner mailing list.

Flags: needinfo?(astevenson)
Whiteboard: [sitewait]
Flags: needinfo?(daniel.cicas)

They passed this report along to the right team internally.

Product: Tech Evangelism → Web Compatibility

See bug 1547409. Moving webcompat whiteboard tags to keywords.

You need to log in before you can comment on or make changes to this bug.