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

Pseudo-classes are triggered randomly (hover/mouseOver, focus/focused, active/mouseDown) #352

Open
XOMAv2 opened this issue Jul 13, 2023 · 1 comment
Labels
bug This is definitely a bug, meaning it is unintended behavior. It likely needs an ellie and a test. has-ellie This is a bug and has an ellie which demonstrates it.

Comments

@XOMAv2
Copy link

XOMAv2 commented Jul 13, 2023

Bug!

If an element is in several states (:hover, :focus, :active), and it contains a set of attributes for each of these states (Element.mouseOver, Element.focused, Element.mouseDown), then one of the conflicting states will be selected randomly.

Steps to reproduce

  1. Several elements are defined in the markup.
  2. Elements use several identical pseudo-classes, for example, Element.mouseOver and Element.mouseDown.
  3. Within the element, pseudo-classes are defined in different order.
  4. Pairs of identical pseudo-classes affect the same attributes with the same values.

Ellie example

Causes of the bug

The elements will have 100% identical CSS classes, but they will be written to the intermediate stylesheet in a different order, and at the end, duplicates will also be removed. If several conflicting events occur (:hover, :focus, :active) according to CSS rules, the selector defined later will be applied.

Expected behavior

Ideal scenario: each element gets a set of unique classes that are applied in the order they are listed in the attribute list.
Alternative scenario: the order of application of pseudo-classes is strictly fixed (:hover < :focus < :active).

Versions

  • OS: masOS Ventura 13.2.1
  • Browser: Chrome
  • Browser Version: 114.0.5735.198
  • Elm Version: 0.19.1 - latest
  • Elm UI Version: 1.1.8 - latest
@github-actions github-actions bot added the has-ellie This is a bug and has an ellie which demonstrates it. label Jul 13, 2023
@XOMAv2
Copy link
Author

XOMAv2 commented Jul 13, 2023

#bug #has-ellie

@github-actions github-actions bot added the bug This is definitely a bug, meaning it is unintended behavior. It likely needs an ellie and a test. label Jul 13, 2023
XOMAv2 added a commit to typeable/elm-ui that referenced this issue Jul 13, 2023
XOMAv2 added a commit to typeable/elm-ui that referenced this issue Jul 13, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug This is definitely a bug, meaning it is unintended behavior. It likely needs an ellie and a test. has-ellie This is a bug and has an ellie which demonstrates it.
Projects
None yet
Development

No branches or pull requests

1 participant