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

[css-contain-3] visibility/content-visibility inconsistency regarding dialogs #7163

Open
rwlbuis opened this issue Mar 21, 2022 · 4 comments
Labels
css-contain-2 Current Work

Comments

@rwlbuis
Copy link

rwlbuis commented Mar 21, 2022

In #6939 (comment) a change was made to set visibility: visible on modal dialogs. This overwrites any visibility set on a parent element, so visibility: hidden on a parent would not hide the modal dialog.

For content-visibility however the expectation is different. This test verifies that content-visibility: hidden hides the complete subtree, including the modal dialog:
https://github.com/web-platform-tests/wpt/blob/830ae49918/css/css-contain/content-visibility/content-visibility-with-top-layer-002.tentative.html

To me this feels inconsistent and potentially confusing to web developers. Thoughts?

@rwlbuis rwlbuis changed the title visibility/content-visibility inconsistency regarding dialogs [css-contain-3] visibility/content-visibility inconsistency regarding dialogs Mar 21, 2022
@tabatkins
Copy link
Member

I don't think the two properties necessarily have anything to do with each other, similarity in name notwithstanding.

That said, consistency with my position in January suggests that c-v:hidden shouldn't have an effect on something in the top layer, as its position in the box tree no longer sees a hidden ancestor.

(We had to add special carve-outs for visibility and pointer-events because they're inherited properties evaluated on the element itself, rather than non-inherited properties that apply an effect to a subtree.)

@vmpstr
Copy link
Member

vmpstr commented Mar 23, 2022

We've also resolved separately (#6728) to say that elements in c-v hidden subtrees will not have boxes in the top layer, since that can cause performance problems (ie style is not updated on the element because of c-v hidden ancestor but that ancestor isn't there in the layout tree).

@nt1m
Copy link
Member

nt1m commented Mar 24, 2022

I do think it is a bit confusing that visibility has a special carve out and that content-visibility doesn't, perhaps we should undo #6939 (comment) ? Right now only WebKit/Safari implements this resolution, Firefox & Chrome haven't gotten around to it yet.

@tabatkins
Copy link
Member

Like I said, the carve-outs exist solely because those properties are inherited (and thus determine whether or not they apply solely on the element tree, which is unaffected by top-layer, since that only affects the box tree). The two properties are completely unrelated other than the fact that they both have the word 'visibility' in their name.

@Loirooriol Loirooriol added the css-contain-2 Current Work label Sep 13, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
css-contain-2 Current Work
Projects
None yet
Development

No branches or pull requests

5 participants