Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Clickable elements below the fold in Safari

See original GitHub issue

Problem

In macOS Safari, clicking links below the fold inside the FocusLock component causes focus to jump to the first link instead of going the destination of the link.

Here’s a codesandbox that reproduces the issue: https://codesandbox.io/s/responsive-navigation-safari-bug-6hvj4

Notes

Removing the FocusLock component from the Drawer component fixes this issue.
Removing tabIndex="-1" from the wrapper div created by @reach/router also fixes this issue:

Issue Analytics

State:
Created 4 years ago
Comments:17 (11 by maintainers)

Top GitHub Comments

1reaction

theKasheycommented, Jan 16, 2020

The only “working” solution, as described above

list target div in shards, ie allow it to be focused
or use white list to “hide” it
or use className to “hide” it
or “prevent default”, which breaks more than it fixes.

No real solution today 😦

Except for the way adopted by reakit - DON’T USE “BUTTONS” - see https://twitter.com/diegohaz/status/1176998100495491072

1reaction

theKasheycommented, Aug 27, 2019

Let’s keep it open unless it’s properly documented, or even implemented on the focus lock side.

Top Results From Across the Web

Solutions for clickable elements hidden beneath scrollbar on ...

Solutions for clickable elements hidden beneath scrollbar on mobile Safari ... Here's the issue: There's a hamburger menu on the top right corner ......

Safari and clickable elements - Google Groups

Open VoiceOver Utility (VO+F8), go to "Verbosity" (with arrow keys or Command-2), then select the "Announcements" tab. Check the box for "Speak text...

The Details disclosure element - HTML - MDN Web Docs

The HTML element creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state.

Using Javascript | Applescript to click button in Safari

I'm trying to click the Proceed button on http://rna.tbi.univie.ac.at/cgi-bin/RNAfold.cgi. I went to "Inspect Element" on the Proceed button and ...

Fix Google Search Console Mobile Usability Issues With A ...

Clickable elements too close together; Text too small to read ... or a code snippet with long lines in a <pre> (as seen...