918996 - Responsive Design View: width does not compensate properly for new scrollbars

Status: RESOLVED FIXED

(DevTools :: Responsive Design Mode, defect)

Description

[Gary Martellino]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.76 Safari/537.36

Steps to reproduce:

On a mac in FF 24:
1. View a site in Responsive Design View.  
2. Select a preset: 320 x 480
3. Notice scrollbar is not compensated for.


Actual results:

Scrollbar style is different from FF 23 => FF 24 on a mac.  The new scrollbar width is not accounted for.  15px needs to be added to the preset values to compensate.  This complicates rotation as well because 15px should be added to the height as well to compensate for rotation.


Expected results:

Responsive design view used to have a floating, mobile style scrollbar that did not take up any width.

Comment 1

[Loic]

I don't have a Mac to test and confirm, but Firefox 24 has introduced a new scrollbar style in OS X 10.7 and higher, see bug 636564. I think it's connected.

Comment 2

[André Reinald]

In FF24 we have overlay scrollbars which don't take up any space on the view, they appear over the content and only when the view is scrolled. I'm not sure I correctly understood this bug though, so I'll let someone else decide if we should mark it "new" or "resolved - won't fix".

Comment 3

[André Reinald]

Sorry for the status change, my mistake.

Comment 4

[Paul Rouget [:paul]]

Scrollbars are hovering the content. So there's nothing to compensate for. The only exception might be on mac osx if the user forced the solid scrollbars.

Gary, is it what you do?

Comment 5

[Gary Martellino]

Attachment: Scrollbars in Dev Tools: RWD since FF24 upgrade

This screenshot shows the scrollbars I'm seeing since the FF24 upgrade.  It's possible that it's a setting, I'm digging to see what I can find; however, the scrollbars were ok before the upgrade.

Comment 6

[Gary Martellino]

Notice that the dimensions are 320x480; but the actual viewable size is 305px (320 - 15px for the scrollbar)

Comment 7

[Stephen A Pohl [:spohl]]

This means that you have the regular, permanently visible scrollbars enabled. I see the same difference between FF23 and FF24 that you've reported. I'm not sure where the previous overlay scrollbars came from, or whether or not we want to keep those. But if you want to have overlay scrollbars back, you can go to System Preferences > General and select "When scrolling" under "Show scroll bars:".

Note that overlay scrollbars are the default on OSX 10.7+, but connecting a USB mouse will switch to the regular, permanently visible scrollbars. By choosing "When scrolling" in System Preferences (as explained above) you can work around this.

Markus, are you familiar with the overlay scrollbars that used to be displayed in Responsive Design View pre-FF24?

Comment 8

[Gary Martellino]

Stephen, thank you. Literally right before reading this, I set the scrollbars to "when scrolling" and it seemed to fix the issue.  I do have a USB mouse connected.  I'm not sure why the sudden change, it could have coincidentally been an OS X update as well, not sure.. but the scroll bar setting seems to do the trick.  Thanks again!

Comment 9

[Markus Stange [:mstange]]

(In reply to Stephen Pohl [:spohl] from comment #7)
> Markus, are you familiar with the overlay scrollbars that used to be
> displayed in Responsive Design View pre-FF24?

Not really, Paul Rouget is the expert here. But it looks like this has to do with bug 879692.

Comment 10

[Stephen A Pohl [:spohl]]

Thanks, Markus. Paul, could you confirm that we no longer expect the 'old' overlay scrollbars to appear in the Responsive Design View?

Comment 11

[Paul Rouget [:paul]]

We have custom floating scrollbars for the responsive mode. We don't use them on osx because osx is supposed to have native floating scrollbars.

If with some specific configuration osx doesn't use the floating scrollbars in Firefox 24, we should use the custom floating scrollbars.

if (osx) {
  // dontUseCustomScrollbars;
} else {
  // useCustomScrollbars;
}

Maybe we should use custom scrollbars all the time. Or maybe we should test if the scrollbars width is > 0px.

Comment 12

[Stephen A Pohl [:spohl]]

Attachment: Patch

This patch makes sure that we use overlay scrollbars in Responsive Design View on OSX. If the system already uses overlay scrollbars, we stick to the native overlay scrollbars. If the system uses permanently visible scrollbars, the Responsive Design View uses its own, custom overlay scrollbars like it used to before bug 879692.

Note that this will also work for overlay scrollbars on Windows 8.

One thing that doesn't work yet is dynamically adjusting the scrollbars in use if the user changes the system-wide scrollbars while Responsive Design View is open. This can be done in System Preferences, or by connecting a USB mouse to the system. To reproduce this on OSX, do the following:
1. Open System Preferences > General
2. Under "Show scroll bars:", select "When scrolling"
3. Open Responsive Design View
4. In System Preferences > General, change "Show scroll bars:" to "Always"

> Result: Permanently visible scrollbars are displayed.

You can also invert step 2 and 4. This will display larger than usual overlay scrollbars.

I believe this edge-case could/should be handled in a follow-up bug, if at all.

Paul, please feel free to forward the review request if necessary.

Comment 13

[Paul Rouget [:paul]]

Comment on attachment 810119 [details] [diff] [review]
Patch

Thank you Stephen.

Comment 14

[Stephen A Pohl [:spohl]]

https://hg.mozilla.org/integration/mozilla-inbound/rev/18e092a846a8

Comment 15

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/mozilla-central/rev/18e092a846a8