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.

Sign up for GitHub

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

z-index is ignored on table elements #3533

Closed
InvalidUsernameException opened this issue Feb 10, 2025 · 1 comment · Fixed by #3595
Closed

z-index is ignored on table elements #3533

InvalidUsernameException opened this issue Feb 10, 2025 · 1 comment · Fixed by #3595
Labels
bug Something isn't working has repro We have a way to reproduce this bug.

Comments

@InvalidUsernameException
Copy link
Contributor

Consider the following testcase:

<!DOCTYPE html>
<style>
div {
  position: fixed;
  width: 100px;
  height: 100px;
}
#behind {
  background-color: red;
  z-index: 1;
}
#in-front {
  background-color: green;
  display: table;
  z-index: 2;
}
</style>
<div id="behind"></div>
<div id="in-front"></div>

In Chrome and Firefox this produces a green square. In Ladybird the red square is displayed instead.

According to the spec the following applies for the #in-front element:

[...] the table generates a principal block box called the table wrapper box that contains the table grid box itself and any caption boxes (in document order). The table grid box is a block-level box that contains the table’s internal table boxes.

and

The computed values of properties position, float, margin-*, top, right, bottom, and left on the table element are used on the table wrapper box and not the table grid box; all other values of non-inheritable properties are used on the table grid box and not the table wrapper box. (Where the table element’s values are not used on the table and table wrapper boxes, the initial values are used instead.)

Ladybird implements this. Based on these rules, the following happens for the #in-front element:

  • the table wrapper box has position: fixed and z-index: auto
  • the table grid box has position: static and z-index: 2.

And because z-index has no effect on elements with static position, it is effectively ignored causing the #in-front element to be rendered behind the #behind element.

I think this is a bug in the spec the z-index also needs to be in the list of properties that that are used on the wrapper box instead of the grid box. And sure enough, adding the property to the list of things that get moved fixes the test case and also solves the layout issues on the website where I reduced this from.

(Originally posted here)
@AtkinsSJ AtkinsSJ added bug Something isn't working has repro We have a way to reproduce this bug. labels Feb 10, 2025
Open
@InvalidUsernameException
Copy link
Contributor Author

I have a bugfix that I can PR for this, but I'll wait a few days before doing so to see if there is some feedback on the linked spec-issue.

Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working has repro We have a way to reproduce this bug.
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

LibWeb: Move z-index to table wrapper box InvalidUsernameException/ladybird
2 participants
@AtkinsSJ @InvalidUsernameException