[csswg-drafts] [css-positioning] position: fixed within a stacking context

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

== [css-positioning] position: fixed within a stacking context ==
The spec of `position: fixed` specifies that: 
> Fixed positioning is similar to absolute positioning. The only 
difference is that for a fixed positioned box, the containing block is
 established by the viewport.

https://www.w3.org/TR/css-position-3/#fixed-pos
https://www.w3.org/TR/css-position-3/#containing-block

But it is not obvious what happens if a `position:fixed` element is 
contained in a parent that creates a stacking context. What happens is
 that the fixed element participates to the scroll and gets clipped 
http://jsbin.com/kehexi/3/edit?html,output
```html
  <style>
    .container {
      border: 1px solid gray;
      width: 200px;
      height: 200px;
      overflow: auto;
      transform: translateZ(0);
    }
    
    .tall {
      height: 400px;
    }
    
    .fixed {
      position: fixed;
      padding: 20px;
      top: 80px;
      left: 80px;
      width: 150px;
      background-color: orange;
    }
  </style>

  <div class="container">
    <div class="tall"></div>
    <div class="fixed">
      I should not scroll! <br>
      I should not get clipped!
    </div>
  </div>
```

Resulting in
<img width="358" alt="screen shot 2016-08-11 at 7 12 02 pm" 
src="https://cloud.githubusercontent.com/assets/6173664/17610928/a1987606-5ff7-11e6-96e1-849fd036b6b8.png">

Is this an expected behavior for `position: fixed`? From the spec, I'd
 expect it to render in the top stacking context and not participate 
to the scrolling (e.g. comment the `transform: translateZ(0)` of 
`.container`)

<img width="292" alt="screen shot 2016-08-11 at 7 12 10 pm" 
src="https://cloud.githubusercontent.com/assets/6173664/17610942/c748543e-5ff7-11e6-8678-38c9d804d493.png">



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

Received on Friday, 12 August 2016 02:15:50 UTC