* STEPS TO REPRODUCE: 1. Enter the following into the snippet editor: <div style="display: flex; width: 50px; height: 50px; background-color: red;" hidden></div>
<rdar://problem/24034110>
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.
(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)...