Isolation doesn't work when Position is relative or transform is applied

sandoche / Darkmode.js

🌓 Add a dark-mode / night-mode to your website in a few seconds

https://darkmodejs.learn.uno

MIT License

2.72k stars 176 forks source link

Isolation doesn't work when Position is relative or transform is applied #12

Closed ericwaetke closed 5 years ago

ericwaetke commented 5 years ago

The Dark-Mode exclusion works perfectly on all "normal" objects. But when I add either a position of fixed, sticky, absolute or relative, It doesn't anymore. Same with transforms etc.

sandoche commented 5 years ago

Try using this on your element:

.darkmode--activated .element {
  mix-blend-mode: difference;
}

ericwaetke commented 5 years ago

Yup, that works! Was that on the website already and I just didn't see it?

sandoche commented 5 years ago

Yep.

k6xiao commented 1 year ago

这个依然不能生效： .darkmode--activated .element { mix-blend-mode: difference; } 这个属性可以生效，但是发现会有一瞬间的闪动： .darkmode--activated .element { filter: invert(1) hue-rotate(180deg); }