Skip to content

Instantly share code, notes, and snippets.

@mattzeunert

mattzeunert/position-absolute-impact-examples.md

Last active April 3, 2019 16:40
Show Gist options
  • Save mattzeunert/7e1d8f3bfd2ce7aa29ab1b4e6790966c to your computer and use it in GitHub Desktop.
Save mattzeunert/7e1d8f3bfd2ce7aa29ab1b4e6790966c to your computer and use it in GitHub Desktop.
Download ZIP
@mattzeunert
Copy link
Author

mattzeunert commented Apr 3, 2019 •
edited

Lighthouse homepage

Before:
Screenshot 2019-04-03 at 14 05 31

After:
Screenshot 2019-04-03 at 14 04 38

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:

Screenshot 2019-04-03 at 14 41 29

After:
Screenshot 2019-04-03 at 14 41 36

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:

Screenshot 2019-04-03 at 15 04 05

After:

Screenshot 2019-04-03 at 15 03 54

Etsy

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

Before:
Screenshot 2019-04-03 at 15 10 42

After:
Screenshot 2019-04-03 at 15 10 36

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:
Screenshot 2019-04-03 at 15 19 52

After:
Screenshot 2019-04-03 at 15 19 45

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment