televator-apps / vimari

Safari port of vimium
https://televator.net/vimari
MIT License
2.57k stars 236 forks source link

Hints not appearing on elements with large `border-radius` values or when space is limited #300

Open ar-rm opened 3 months ago

ar-rm commented 3 months ago

Describe the bug Elements with sufficiently high border-radius values cause the Vimari hint label to not appear.

This is how I found the issue. But in my testing I found that it might be fundamentally about the available space and hiding as a result of overflow: hidden.

Screen Shot 2024-08-15 at 4 14 13 PM

To Reproduce

  1. Add border-radius: 999em to an element (commonly used to create a pill shaped element.)
  2. Invoke Vimari
Testcase (html, css) ```html Testacase: Hints not appearing on elements with large `border-radius` values or when space is limited
  1. border-radius: 126px ✅ Has Vimari hint
  2. border-radius: 126px; padding: 0 ❌ No Vimari hint
  3. border-radius: 127px ❌ No Vimari hint
  4. border-radius: 127px ❌ No Vimari hint ✅ Child element has Vimari hint
```

(For Vimari to work, you'll have to run this from a server, ie: localhost, not file://. But you already knew that :-)

There's a relationship between the font-size and the border-radius value. Above/below a certain value and the hint appears/disappears (Examples: 1, 3,4). You can see this by zooming the page in/out (I'm not able to figure out the exact ratio). Also you have to dismiss Vimari, change the zoom level, and then re-invoke Vimari to see the differences.

I also noticed that if you add a child element (Example: 4) the hint appears on that child element.

Then I noticed if you remove the padding on the parent <a> it will also affect whether the hint shows or not. Example: 2.

So I think this is ultimately about available space. Maybe there's an overflow: hidden somewhere that's causing this?

Possibly?: https://github.com/televator-apps/vimari/blob/0d31b6af58f8779fb1896d566f11d8ed586e5fb8/Vimari%20Extension/css/injected.css#L46

Expected behavior A Vimari hint should appear on the element but doesn't.

Desktop (please complete the following information):

Additional context


Thank you for Vimari!