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

ar-rm · 2024-08-15T20:21:23Z

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?:

vimari/Vimari Extension/css/injected.css

Line 46 in 0d31b6a

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!

The text was updated successfully, but these errors were encountered:

ar-rm added the bug label Aug 15, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

ar-rm commented Aug 15, 2024 •

edited

Loading

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

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

Comments

ar-rm commented Aug 15, 2024 • edited Loading

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

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

ar-rm commented Aug 15, 2024 •

edited

Loading