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

Stylelint - fixed only on top level elements #274

Open
EECOLOR opened this issue Dec 8, 2024 · 1 comment
Open

Stylelint - fixed only on top level elements #274

EECOLOR opened this issue Dec 8, 2024 · 1 comment

Comments

@EECOLOR
Copy link
Member

EECOLOR commented Dec 8, 2024

I don't think this can be done with stylelint alone.

The problem: when you define transform, filter, or will-change, any child with position: fixed will no longer be fixed (https://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/).

One solution would be to search for alternatives of the 'problem-causing properties' (like using box-shadow instead of filter: drop-shadow). I would however prevent the problem by only allow using fixed for 'top-layer' components. Similar to how we work with portals.

There are probably multiple solutions to this, portals would be one, but that might be obsolete with <dialog and the concept of top layer. If this problem exists in the top layer as well I don't know, we would have to research this.

@EECOLOR
Copy link
Member Author

EECOLOR commented Dec 8, 2024

There is also a good chance that using the transform, filter, or will-change: transform do not make sense in ancestors and should be prevented there so that they only apply to leaf nodes.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant