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

Recommended example for :backdrop #75

Open
jh3y opened this issue Feb 9, 2023 · 8 comments
Open

Recommended example for :backdrop #75

jh3y opened this issue Feb 9, 2023 · 8 comments
Assignees
@dvdherron
Labels
sprint: current

Comments

@jh3y
Copy link

jh3y commented Feb 9, 2023

Hey 👋

Might be cool to have some kind of support for :backdrop behavior or a heads-up on how you might implement that yourself.

Could be in something like:

[popover].:open:before { ...backdropStyles }
@supports ([popover]:backdrop) { ...backdropStyles }

Although using the pseudoelement runs into the issue of getting the :backdrop beneath the content. Might be nice to give some kind of guided snippet for those wanting that behavior 👍

@jh3y
@joshnuss
Copy link

joshnuss commented Dec 26, 2023 •
edited
Loading

One solution to keep the backdrop beneath everything, is to use :has():

::backdrop, body:has(.\:popover-open)::before { 
  z-index: 1;
  content: '';
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;

  background: #0004;
  backdrop-filter: blur(2px); 
}

.\:popover-open {
  z-index: 2;
}

[popup]:popover-open {
  z-index: 2;
}

@jgerigmeyer
Copy link
Member

jgerigmeyer commented Jan 3, 2024 •
edited
Loading

@mirisuzanne @keithamus What do you think about this? Seems related to #130

@jgerigmeyer jgerigmeyer mentioned this issue Jan 3, 2024
Closed
@mirisuzanne
Copy link
Member

I agree these are the same issue - so we could close the newer one as a duplicate. Overall, I think it's a good idea to provide a solution here. I'd have to play around with the different options to know what solution I like best. It seems to me like providing an additional wrapping element might be the most robust solution?

@jgerigmeyer
Copy link
Member

I closed the newer issue. @mirisuzanne Is this something you'd have time to look at? Or maybe @stacyk?

@mirisuzanne
Copy link
Member

Looking again, I think the body:has() trick from @joshnuss is pretty promising. Could simplify a bit, maybe:

/* This could be built into the polyfill */
body:has(.\:popover-open)::before { 
  content: '';
  position: fixed;
  inset: 0;
}

/* This is the snippet for authors to use */
::backdrop,
body:has(.\:popover-open)::before {
  /* backdrop styles */
}

I don't think we need the z-index stuff, since both parts will be positioned, and body::before should default to the bottom of the stack. I also replaced the combo top + left + width + height with just inset: 0.

But someone should probably test that.

@mirisuzanne
Copy link
Member

If we don't want to require :has() support, we could probably just inject an element at the start of the body - and do something similar with it?

@joshnuss
Copy link

joshnuss commented Jan 3, 2024

Another solution for avoiding :has could be to add a class to the <body> element when the popover is open.

@onelonemonkey
Copy link

onelonemonkey commented Mar 7, 2024 •
edited
Loading

One solution to keep the backdrop beneath everything, is to use :has():

::backdrop, body:has(.\:popover-open)::before { 
  z-index: 1;
  content: '';
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;

  background: #0004;
  backdrop-filter: blur(2px); 
}

.\:popover-open {
  z-index: 2;
}

[popup]:popover-open {
  z-index: 2;
}

I've tried implementing this on a large application and ran into all sorts of issues with z-index, positioning and overflow, it works perfectly in isolation but the TopLayer breaks free of constraints natively however even though the backdrop works, the popover is still bound by surrounding elements and their styles in the DOM.

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

@dvdherron dvdherron

Labels
sprint: current
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@joshnuss @mirisuzanne @jgerigmeyer @jh3y @stacyk @onelonemonkey @dvdherron