pf2e icon indicating copy to clipboard operation
pf2e copied to clipboard

Strengthening of hidden attribute creates difficulties with module CSS

Open tdhsmith opened this issue 1 year ago • 1 comments

The module Dice Tray (mclemente/fvtt-dice-tray) uses the hidden attribute to hide unused elements of the UI and subsequently displays them with jQuery .show.

Since #12110 / v5.11.0 of PF2e, the system's CSS strengthens the global behavior of the hidden attribute to be:

[hidden] {
  display: none !important;
}

jQuery's function does not override !important styles, thus this change causes content with the hidden attribute to be nonresponsive to jQuery's show(). (For Dice Tray, this currently means the fortune/misfortune buttons do not render on ≥5.11)


Now obviously this is much easier changed on the module side -- and I'm going to contribute a change there shortly -- but it may not be the only downstream effect so I wanted to bring it up in case anyone discovers other modules with related issues.

If the rule could be less global and more tightly-scoped, it would help avoid issues, but it's 1000% understandable it might be a TON of work to figure out repercussions and feasibility.


Additional reading: I couldn't really come up with a clear answer on what the "right" semantics are. MDN softly suggests that setting the display property of a hidden element is an approach to show it, but that's all within a MAY clause that merely speculates about browser behaviors; the specification might not care about this implementation detail.

Web browsers may implement the hidden state using display: none, in which case the element will not participate in page layout. This also means that changing the value of the CSS display property on an element in the hidden state will override the state. For instance, elements styled display: block will be displayed despite the hidden attribute's presence.

tdhsmith avatar Jan 08 '24 22:01 tdhsmith

I think we could exclude "until-found" values, at least.

stwlam avatar Jan 09 '24 04:01 stwlam