Make CSS more efficient

[tigt]

• position: absolute autosets display: block
• overflow: hidden is redundant on a replaced element like <object>
• visibility: hidden should replicate the functionality of z-index: -1, opacity: 0, and pointer-events: none; avoid the keyboard focus issue in PR25; and accessibly hide the object from assistive technology

[SashaKoro]

@KyleAMathews I would also very much like for this to be merged in. The keyboard accessibility bug that this merge request fixes is very limiting to users that use assistive technology.

[eaglus]

@tigt

• position: absolute autosets display: block
• overflow: hidden is redundant on a replaced element like <object>

Can you please give a link to some w3c document describing this?

• visibility: hidden should replicate the functionality of z-index: -1, opacity: 0, and pointer-events: none; avoid the keyboard focus issue in PR25; and accessibly hide the object from assistive technology

Are you sure that object with visibility: hidden will receive 'resize' events?

[tigt]

@eaglus:

The spec says an absolutely-positioned element creates its own containing block. It means “block” literally in this case:

• Block-level flow doesn't matter for absolutely positioned elements, since they're positioned outside of layout
• A position:absolute element respects height and width like a block-level element. <object> does already, since it's inline-block in UA stylesheets.

Replaced elements cannot overflow in the first place. If an <iframe> could overflow, there’d be no point giving it explicit dimensions.

---

As for if visibility:hidden preserves the resize event, I made a reduced test case. Seems to work even in the problem children of Safari and IE11.

However, Firefox is different. Your intuition was correct: <object> with visibility:hidden does not fire resize events, which is Bugzilla #1430709.

In light of that, adding tabindex="-1" and title="" to the resize observer element makes more sense for accessibility. The display:block and overflow:hidden declarations are still redundant, though.

I can update this pull request if you like.

[eaglus]

In light of that, adding tabindex="-1" and title="" to the resize observer element makes more sense for accessibility.

Hi @tigt! Why do you want to set title="" explicitly? Is'nt default title empty? Does it have some meaning for accessibility issues on devices like screen readers or something else?

[eaglus]

fixed here: https://github.com/KyleAMathews/element-resize-event/commit/4bed032e6d70aa792bcca1f2a2eb77ef90a231f1

[tigt]

@eaglus Yeah, exactly. It's like how alt="" differs from leaving the attribute off <img> entirely — it sends a signal to screen-readers that the element isn't real content and can be safely ignored.