Steps:

• Make sure you have the new RDM turned on devtools.responsive.browserUI.enabled
• Open RDM on any page
• Choose a device which viewport's is taller than your browser window height, causing a vertical scrollbar
• Scroll down the page

Expected: the simulated viewport should scroll, but the RDM toolbar should remain fixed at the top

Actual: both scroll

Note that the same thing happens for horizontal scrolling.

Thanks for filing Patrick! I believe this was regressed by Bug 1596166 after removing the height: 100% declaration when the device modal is opened. We can add the fix here: https://searchfox.org/mozilla-central/source/devtools/client/responsive/responsive-browser.css#25

(In reply to Micah Tigley [:mtigley] from comment #2)

Thanks for filing Patrick! I believe this was regressed by Bug 1596166 after removing the height: 100% declaration when the device modal is opened. We can add the fix here: https://searchfox.org/mozilla-central/source/devtools/client/responsive/responsive-browser.css#25

I commented on the incorrect bug. This comment should be in Bug 1604729.

I don't think this is a very easy problem to solve.
Here's the structure:

<stack class="browserStack">
<iframe class="rdm-toolbar">...</iframe>
<browser>...</browser>
...
</stack>

The stack element uses a grid layout to position the browser within it.
We want the toolbar to be fixed, so to solve this, we'll need to make the iframe use position:fixed.
Doing this however prevents the stack from scrolling anymore. Only pointer-events:none on the iframe makes it scroll again, but doing it prevents using the toolbar at all as the events don't reach it anymore.
It would be good to make the iframe smaller (i.e. just as tall as the toolbar), right now it covers the full height of the stack element. This is probably because we need to be tall in order to contain the device popup.
One option would be to make it small only when the device popup is not shown, and when we need to show it, we expand the iframe to the full 100% of the height.

Acutally, the iframe already seems to resize itself when the modal is opened. So doing this change seems to fix the bug:

.browserContainer.responsive-mode .browserStack > .rdm-toolbar {
  border: none;
  position: fixed;
  width: 100%;
  height: 29px;
  z-index: 1;
}

It would be good to replace the hard-coded 29px by a variable if we can access it somewhere.
Also, when the browser is narrow, the RDM toolbar wraps on 2 lines, and is therefore taller than 29px. So we would need to find a fix for this too.

(In reply to Patrick Brosset <:pbro> from comment #5)

.browserContainer.responsive-mode .browserStack > .rdm-toolbar {
  border: none;
  position: fixed;
  width: 100%;
  height: 29px;
  z-index: 1;
}

Yeah, this is tough!

I found setting it to position: fixed causes the bottom of the device modal to become inaccessible. This was also brought up in Bug 1604729. I'll keep investigating.

https://hg.mozilla.org/mozilla-central/rev/2a3597aa8d9e

I have managed to reproduce this issue using Firefox 73.0a1 (BuildId:20191218211221).

This issue is verified fixed using Firefox 75.0b7 (BuildId:20200322132212) on Windows 10 64bit, macOS 10.14 and Ubuntu 18.04 64bit.