pf2e
pf2e copied to clipboard
Strengthening of hidden attribute creates difficulties with module CSS
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 styleddisplay: block
will be displayed despite thehidden
attribute's presence.
I think we could exclude "until-found" values, at least.