Skip to content

/ servo

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Scroll frames should not be containing blocks for position:absolute descendants #13530

Closed
mstange opened this issue Sep 30, 2016 · 5 comments
Closed

Scroll frames should not be containing blocks for position:absolute descendants #13530

mstange opened this issue Sep 30, 2016 · 5 comments
Assignees
@mrobinson
Labels
A-gfx/compositing

Comments

@mstange
Copy link
Contributor

@mstange mstange commented Sep 30, 2016

In this testcase, the cyan circle should not scroll with the scroll frame contents: https://jsfiddle.net/mstange/r96r1pqh/1/

Additionally, it should not be clipped by the scroll frame. And it should be composited in the same opacity group as the scrolled contents.

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Opacity does not create a containing block for position:absolute descendants, the clip on the opacity should only apply to the descendants that have opacity as their containing block, and all elements in the opacity should share the same opacity group.</title>

<style>

.scrollbox {
  margin-left: 100px;
  width: 300px;
  height: 400px;
  overflow: auto;
  border: 1px solid black;
}

.scrolledContent {
  padding: 200px 0;
  height: 1000px;
}

.opacity {
  opacity: 0.8;
}

.layer {
  height: 40px;
  margin: 10px;
  border: 1px solid rgba(0, 0, 0, 0.3);
}

.bottom {
  background-color: blue;
}

.middle {
  background-color: cyan;
  position: absolute;
  top: 50px;
  left: 30px;
  width: 150px;
  height: 150px;
  border-radius: 100%;
}

.top {
  background-color: magenta;
  position: relative;
  z-index: 1;
  margin-left: -50px;
}

</style>

<div class="scrollbox">
  <div class="scrolledContent opacity">
    <div class="layer bottom"></div>
    <div class="layer middle"></div>
    <div class="layer top"></div>
  </div>
</div>
@mrobinson mrobinson self-assigned this Nov 5, 2016
@jrmuizel jrmuizel mentioned this issue Jan 18, 2017
Closed
@glennw glennw mentioned this issue Jan 18, 2017
Closed
mrobinson added a commit to mrobinson/servo that referenced this issue Mar 24, 2017
@mrobinson
Fix scroll root of absolutely positioned elements
84d009e 
Absolutely positioned elements should be given the scroll root of their
containing block and not necessarily the scroll root of their parent.
This fixes several CSS tests, though others are still failing pending a
similar fix for inherited clipping rectangles.

Fixes servo#13530.
mrobinson added a commit to mrobinson/servo that referenced this issue Mar 24, 2017
@mrobinson
Fix scroll root of absolutely positioned elements
2d704e0 
Absolutely positioned elements should be given the scroll root of their
containing block and not necessarily the scroll root of their parent.
This fixes several CSS tests, though others are still failing pending a
similar fix for inherited clipping rectangles.

Fixes servo#13530.
mrobinson added a commit to mrobinson/servo that referenced this issue Mar 27, 2017
@mrobinson
Fix scroll root of absolutely positioned elements
feac767 
Absolutely positioned elements should be given the scroll root of their
containing block and not necessarily the scroll root of their parent.
This fixes several CSS tests, though others are still failing pending a
similar fix for inherited clipping rectangles.

Fixes servo#13530.
@mrobinson mrobinson mentioned this issue Mar 27, 2017
Merged
3 of 5 tasks complete
bors-servo added a commit that referenced this issue Mar 27, 2017
@bors-servo
Auto merge of #16146 - mrobinson:containing-block-scrolling, r=glennw
Loading status checks…
4f54cf7 
Fix scroll root of absolutely positioned elements

Absolutely positioned elements should be given the scroll root of their
containing block and not necessarily the scroll root of their parent.
This fixes several CSS tests, though others are still failing pending a
similar fix for inherited clipping rectangles.

Fixes #13530.

<!-- Please describe your changes on the following line: -->

---
<!-- Thank you for contributing to Servo! Please replace each `[ ]` by `[X]` when the step is complete, and replace `__` with appropriate data: -->
- [x] `./mach build -d` does not report any errors
- [x] `./mach test-tidy` does not report any errors
- [ ] These changes fix #__ (github issue number if applicable).

<!-- Either: -->
- [x] There are tests for these changes OR
- [ ] These changes do not require tests because _____

<!-- Also, please make sure that "Allow edits from maintainers" checkbox is checked, so that we can help you if you get stuck somewhere along the way.-->

<!-- Pull requests that do not address these steps are welcome, but they will require additional verification as part of the review process. -->

<!-- Reviewable:start -->
---
This change is [<img src="https://reviewable.io/review_button.svg" height="34" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/servo/16146)
<!-- Reviewable:end -->
bors-servo added a commit that referenced this issue Mar 27, 2017
@bors-servo
Auto merge of #16146 - mrobinson:containing-block-scrolling, r=glennw
Loading status checks…
9f5b172 
Fix scroll root of absolutely positioned elements

Absolutely positioned elements should be given the scroll root of their
containing block and not necessarily the scroll root of their parent.
This fixes several CSS tests, though others are still failing pending a
similar fix for inherited clipping rectangles.

Fixes #13530.

<!-- Please describe your changes on the following line: -->

---
<!-- Thank you for contributing to Servo! Please replace each `[ ]` by `[X]` when the step is complete, and replace `__` with appropriate data: -->
- [x] `./mach build -d` does not report any errors
- [x] `./mach test-tidy` does not report any errors
- [ ] These changes fix #__ (github issue number if applicable).

<!-- Either: -->
- [x] There are tests for these changes OR
- [ ] These changes do not require tests because _____

<!-- Also, please make sure that "Allow edits from maintainers" checkbox is checked, so that we can help you if you get stuck somewhere along the way.-->

<!-- Pull requests that do not address these steps are welcome, but they will require additional verification as part of the review process. -->

<!-- Reviewable:start -->
---
This change is [<img src="https://reviewable.io/review_button.svg" height="34" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/servo/16146)
<!-- Reviewable:end -->
@glennw
Copy link
Member

@glennw glennw commented Mar 28, 2017

@mrobinson I tested this against master and it doesn't seem to be working for me?
@mrobinson
Copy link
Member

@mrobinson mrobinson commented Mar 28, 2017

Hrm. This seems to be working for me:
absolutelypositioneddescendants

Perhaps that's some kind of platform / build-type specific issue?
@glennw
Copy link
Member

@glennw glennw commented Mar 28, 2017

Interesting. I'll try a fresh build again tomorrow and see if I can still repro. The gif looks great!
@glennw
Copy link
Member

@glennw glennw commented Mar 28, 2017

@mrobinson I tested this again - pasted the repro case above into a file, and loaded in current Servo master - and it doesn't seem to work. Perhaps the test repro above is incorrect? Or something really weird is happening with my build?
@glennw
Copy link
Member

@glennw glennw commented Mar 28, 2017

@mrobinson Oh, never mind - I just realized it was an issue with my local build. This all works now, great news!
clementmiao added a commit to clementmiao/servo that referenced this issue Apr 7, 2017
@mrobinson @clementmiao
Fix scroll root of absolutely positioned elements
924b64c 
Absolutely positioned elements should be given the scroll root of their
containing block and not necessarily the scroll root of their parent.
This fixes several CSS tests, though others are still failing pending a
similar fix for inherited clipping rectangles.

Fixes servo#13530.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@mrobinson mrobinson

Labels
A-gfx/compositing
Projects
None yet
Milestone
No milestone
Linked pull requests

Successfully merging a pull request may close this issue.

Fix scroll root of absolutely positioned elements
4 participants
@mrobinson @jdm @mstange @glennw
You can’t perform that action at this time.