Last active
April 3, 2019 16:40
-
-
Save mattzeunert/7e1d8f3bfd2ce7aa29ab1b4e6790966c to your computer and use it in GitHub Desktop.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Lighthouse homepage
Before:
![Screenshot 2019-04-03 at 14 05 31](https://user-images.githubusercontent.com/1303660/55481133-9f66db00-5619-11e9-9f2b-08379a9ce252.png)
After:
![Screenshot 2019-04-03 at 14 04 38](https://user-images.githubusercontent.com/1303660/55481132-9f66db00-5619-11e9-82dd-c99f5237befb.png)
Adobe homepage
Their nested footer nav uses
visibility: hidden
on the child nav item container andmax-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:
![Screenshot 2019-04-03 at 14 41 36](https://user-images.githubusercontent.com/1303660/55483543-b22fde80-561e-11e9-9f59-21c11b5c7b83.png)
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 consideroverflow: 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 theoverflow: hidden
container)Before:
After:
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](https://user-images.githubusercontent.com/1303660/55485771-01780e00-5623-11e9-986f-aa17f9ae057f.png)
After:
![Screenshot 2019-04-03 at 15 10 36](https://user-images.githubusercontent.com/1303660/55485770-01780e00-5623-11e9-973f-23b4de44e929.png)
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](https://user-images.githubusercontent.com/1303660/55486317-012c4280-5624-11e9-8612-2a28caeb9e19.png)
After:
![Screenshot 2019-04-03 at 15 19 45](https://user-images.githubusercontent.com/1303660/55486316-012c4280-5624-11e9-9fa7-b6e331921d30.png)