Skip to content
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

Hit test on fixed DIV incorrectly offset when page is scrolled #12763

Closed
samuknet opened this issue Aug 8, 2016 · 1 comment
Closed

Hit test on fixed DIV incorrectly offset when page is scrolled #12763

samuknet opened this issue Aug 8, 2016 · 1 comment

Comments

@samuknet
Copy link
Contributor

@samuknet samuknet commented Aug 8, 2016

The problem occurs when there is a div with CSS position: fixed. In this test, there is a cursor:pointer style and a :hover{ background-color: red} style to indicate that the DIV has been hovered over.

These styles initially work when the page first loads - hovering over the DIV makes the cursor become a pointer and changes the background colour of it.

However, when the document is scrolled down by any amount, the pointer cursor and background colour no longer work on hover. Scrolling the document back to the very top makes them work again.

The problem appears to be specific to 'position: fixed'.
Demo:
demo

One subtlety is that scrolling the page down any amount which isn't the full height of the DIV means that the hover styles (cursor pointer and background colour) do work but only on a top portion of the div. For example, scrolling down the page approximately half the height of the div means that the hover styles only work as expected on the top half of the div, but nothing happens when hovering over the bottom half.

It feels as if the DIV's hit test coordinates are scrolling along with the rest of the page just as it would if it didn't have position: fixed set.

Online test case here.

@samuknet samuknet changed the title Hit test on fixed DIV is incorrectly offset when page is scrolled Hit test on fixed DIV incorrectly offset when page is scrolled Aug 8, 2016
@emilio
Copy link
Member

@emilio emilio commented Aug 8, 2016

On it.

@emilio emilio added the C-assigned label Aug 8, 2016
@emilio emilio self-assigned this Aug 8, 2016
bors-servo added a commit that referenced this issue Aug 8, 2016
layout: Take into account the client point for fixed positioned stack…

<!-- 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
- [x] These changes fix #12763 (github issue number if applicable).

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

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

…ing contexts.
bors-servo added a commit that referenced this issue Aug 10, 2016
layout: Take into account the client point for fixed positioned stacking contexts

<!-- 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
- [x] These changes fix #12763 (github issue number if applicable).

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

<!-- 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/12777)
<!-- Reviewable:end -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

3 participants
You can’t perform that action at this time.