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)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Testacase: Hints not appearing on elements with large `border-radius` values or when space is limited</title>
<style type="text/css" media="screen">
li {
margin-bottom: 20px;
}
a {
padding: 10px;
color: white;
background-color: black;
}
code {
margin-right: 10px;
}
</style>
</head>
<body>
<ol>
<li>
<code>border-radius: 126px</code> <a href="#0" style="border-radius: 126px;">✅ Has Vimari hint</a>
</li>
<li>
<code>border-radius: 126px; padding: 0</code> <a href="#0" style="border-radius: 126px; padding: 0px;">❌ No Vimari hint</a>
</li>
<li>
<code>border-radius: 127px</code> <a href="#0" style="border-radius: 127px;">❌ No Vimari hint</a>
</li>
<li>
<code>border-radius: 127px</code> <a href="#0" style="border-radius: 127px;">❌ No Vimari hint <span>✅ Child element has Vimari hint</span></a>
</li>
</ol>
</body>
</html>
(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?:
|
overflow: hidden !important; |
Expected behavior
A Vimari hint should appear on the element but doesn't.
Desktop (please complete the following information):
- macOS version: 12.7
- Safari version: 17.4
- Vimari version: 2.1.1
Additional context
- Vimium doesn't get tripped up by this.
Thank you for Vimari!
Describe the bug
Elements with sufficiently high
border-radiusvalues 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: 999emto an element (commonly used to create a pill shaped element.)Testcase (html, css)
(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-sizeand theborder-radiusvalue. 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
paddingon 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: hiddensomewhere that's causing this?Possibly?:
vimari/Vimari Extension/css/injected.css
Line 46 in 0d31b6a
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!