Bug 152674 – Elements with the "hidden" attribute still show up if "display: flex;"

• Component: DOM
• Status: RESOLVED FIXED

[Devin Rousso]

* STEPS TO REPRODUCE:
1. Enter the following into the snippet editor:

<div style="display: flex; width: 50px; height: 50px; background-color: red;" hidden></div>

[Radar WebKit Bug Importer]

<rdar://problem/24034110>

[Joseph Pecoraro]

I believe this is behaving correctly. We match Firefox and Chrome here.

Web Inspector shows the style cascade being:

  inline style:
    display: flex

  html attributes: (from `hidden`)
    display: none

  user agent styles for `div`:
    display: block

The HTML Attributes section could just as easily have been treated as a user agent style like that recommended in the HTML spec:
https://html.spec.whatwg.org/multipage/interaction.html#the-hidden-attribute
https://html.spec.whatwg.org/multipage/rendering.html#hiddenCSS
    
  [hidden] {
    display: none;
  }

In which case, the more-specific inline style of `display: flex` overrides it.

User styles (page styles) can include their own styles to make the hidden attribute stronger...

  [hidden] {
    display: none !important;
  }

... but I think right now we are behaving as expected.

[Devin Rousso]

(In reply to comment #2)
> [hidden] {
>     display: none;
> }

Alright, well this is what I used anyways so I guess it's fine. Just not at all what I expected. Applying "hidden" to an element should hide it from view (at least that's how I take it)...