position-absolute-impact-examples.md

Lighthouse homepage

Before:

After:

Adobe homepage

Their nested footer nav uses visibility: hidden on the child nav item container and max-height: 0 on the parent. Before we didn't pick up on the child items not being top-level and failed the footer as a result:

Before:

After:

GoDaddy UK

The social links contain a large child image, but have a smaller container with overflow: hidden. This causes problems for us because we don't consider overflow: hidden when finding the tappable rects.

With elementFromPoint visibility detection we wrongly decide that the tap target is invisible, because the center of the largest rect is invisible (because of the overflow: hidden container)

Before:

After:

Etsy

We now correctly detect a small position absolute tap target (which has opacity: 0 when unfocused)

Before:

After:

Eventbrite

These buttons are fairly big (40px) but they are also partially on top of the main tap target for this item, so the overlap ratio is large. I guess this is fine, and they should make their tap targets at least 48px large?

Before:

After: