[csswg-drafts] [css-overflow] which interactions can cause scrolling with hidden scroll containers (#6355)

frivoal has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-overflow] which interactions can cause scrolling with hidden scroll containers ==
For `overflow:hidden` scroll containers, as well as (since #4113) for `scroll` or `auto` scroll containers with `visibility: hidden` and descendants that have `visibility: visible`, the spec say that programmatic scrolling is allowed, while direct interactive scrolling such as with the mouse wheel is not.
But there doesn't seem to be full agreement about the precise set of things that can/cannot trigger scrolling. There are disagreements between browsers, and disagreements within a single browser on `visibility: hidden` vs `overflow: hidden`:

<table>
<thead>
<tr><td><td><th>Chrome<th>Safari<th>Firefox
<tbody>
<tr>
  <th rowspan=2>mouse wheel / touch pad scroll / touch screen drag
  <th>`overflow:hidden`    <td>❌<td>❌<td>❌
<tr><th>`visibility:hidden`<td>❌<td>✅ (agreed to switch)<td>✅ (agreed to switch)
<tr>
  <th rowspan=2>arrow / page-up / page-down / … keys on the scroll container
  <th>`overflow:hidden`    <td>❌<td>❌<td>❌
<tr><th>`visibility:hidden`<td>❌<td>❌<td>❌
<tr>
  <th rowspan=2>arrow / page-up / page-down / … keys on a descendant
  <th>`overflow:hidden`    <td>❌<td>❌<td>❌
<tr><th>`visibility:hidden`<td>✅<td>✅<td>✅
<tr>
  <th rowspan=2>tab-focusing a descendant
  <th>`overflow:hidden`    <td>✅<td>✅<td>✅
<tr><th>`visibility:hidden`<td>✅<td>✅<td>✅
<tr>
  <th rowspan=2>navigating to the fragment identifier of a descendant
  <th>`overflow:hidden`    <td>✅<td>✅<td>✅
<tr><th>`visibility:hidden`<td>✅<td>✅<td>✅
<tr>
  <th rowspan=2>Extending a selection with the mouse
  <th>`overflow:hidden`    <td>❌<td>❌<td>❌
<tr><th>`visibility:hidden`<td>✅<td>✅<td>✅
<tr>
  <th rowspan=2>Extending a selection with the keyboard
  <th>`overflow:hidden`    <td>✅<td>✅<td>❌
<tr><th>`visibility:hidden`<td>✅<td>✅<td>✅
</table>

(results established by playing around with http://software.hixie.ch/utilities/js/live-dom-viewer/?saved=9375)

Presumably, given the resolution in https://github.com/w3c/csswg-drafts/issues/4113#issuecomment-516935337, we want to get rid of the differences between `overflow:hidden` and `visibility:hidden`, but which behavior should we pick for each case? What's the higher level principle?

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6355 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 7 June 2021 06:51:41 UTC