[csswg-drafts] [css-overflow] overflow-clip-margins -> clip-box + hit-margin (#5404)

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

== [css-overflow] overflow-clip-margins -> clip-box + hit-margin ==
Document https://www.w3.org/TR/css-overflow-3 defines [overflow-clip-margins](https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin).

Problem is that `overflow-clip-margin` does not address event handling and associated mouse hit test issues.

Consider this:
```
textarea {
   overflow: clip;
   overflow-clip-margin: 100px;
}
```
How UA shall handle clicks on text rendered outside of padding box? 

To address this I propose to replace `overflow-clip-margin` by `clip-box` property instead:
```
clip-box: default | content-box | padding-box | border-box | hit-margin-box;
```
Where hit-margin-box tells that clip box has to be set to box defined by `hit-margin` property.
`hit-margin`  is similar to `margin` but has no other effects other than expanding (or shrinking) mouse hit-test area of the element.

Having the clip-box in place will also help to solve other clipping problems. Consider this

```
  input[type="search"] {
     padding-left: 2em; /* room for the icon */ 
     background: url(looking-glass-icon.svg) no-repeat 0,5em 50%;
     overflow:clip; 
     clip-box: content-box; /* text will not be drawn on top of the icon */
  }
```
There is no way in CSS to achieve this effect at the moment rather than composing such basic element from multiple DOM elements. 

Yet `hit-margin` will solve other usability issues, like:
```
@media handheld {
   button.small {
     size: 1em;
     hit-margin: 2em; /* extending hit margin on mobiles so it can be clicked by finger */
   } 
}
```




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


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

Received on Thursday, 6 August 2020 20:30:03 UTC