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.
To Reproduce
Add border-radius: 999em to an element (commonly used to create a pill shaped element.)
Invoke Vimari
Testcase (html, css)
```html
Testacase: Hints not appearing on elements with large `border-radius` values or when space is limited
(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?
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
.To Reproduce
border-radius: 999em
to an element (commonly used to create a pill shaped element.)Testcase (html, css)
```htmlborder-radius: 126px
✅ Has Vimari hintborder-radius: 126px; padding: 0
❌ No Vimari hintborder-radius: 127px
❌ No Vimari hintborder-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
, notfile://
. But you already knew that :-)There's a relationship between the
font-size
and theborder-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!