'Sometimes small gap appears between child and parent in an underlined menu

I am working on a navigation with a bottom border. Active links are displayed with a second bottom border.

When I press refresh, sometimes there is a small gap between the two borders like on this screenshot. Why?

enter image description here

When I resize the window the gap is gone. I have this issue in Chrome 97 on a mac. But I'm not sure if it doesn't occur in other browsers as well.

Does somebody can point me in the right direction?

* {
    box-sizing: border-box;
}

a {
    text-decoration: none;
}

li,
ul {
    list-style-type: none;
    padding: 0;
}

li,
ul {
    margin: 0;
}

img{
   width:100%;
   height: auto;
 }

.projektmenu-wrap {
    border-bottom: 1px solid #000;
    list-style: none;
    overflow-x: auto;
    padding-left: 2rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    white-space: nowrap;
    z-index: 98;
}

.projektmenu {
    align-items: flex-start;
    display: flex;
    flex-grow: 1;
    flex-wrap: nowrap;
    justify-content: flex-start;
    white-space: nowrap;
    width: 100%;
}

.projektmenu__item {
    border-bottom: 3px solid transparent;
    margin-right: 2em;
    margin-top: 0;
}

.projektmenu__item--selected,
.projektmenu__item:hover {
    border-bottom: 3px solid #000;
}
<img src="https://picsum.photos/200/300">

<nav class="projektmenu-wrap">
    <div class="scrollable-menu">
        <ul class="projektmenu">
              <li class="projektmenu__item projektmenu__item--selected">
                   <a href="#">Lorem Ipsum</a>
               </li>
               <li class="projektmenu__item ">
                    <a href="#">Dolor est</a>
               </li>
          </ul>
    </div>
</nav>

After some debugging i think the problem could be position: sticky.

Edit:

After some more debugging I realize that I forget something here, before the menu element there is an image with 100%width and auto height, maybe that could be the problem. I added it to the code above

After trying a lot of things, I have added some vw to the border, for the moment that is looking good. But it is hard to tell if it is the solution:

border-bottom: calc(3px + 0.1vw) solid #000
css


Solution 1:[1]

In general, having such a double border solution is always prone to rendering issues, because at different zoom levels the browser renders the borders a bit different.

See also: Google Chrome - Rendering differences when zooming in/out

A solution / workaround for your example would be to define the border width in relative units (e.g. rem), which isn't linked to pixels but based on font sizes (e.g. the root element).

Try this out:

.projektmenu__item--selected,
.projektmenu__item:hover {
    border-bottom: 0.2rem solid #000;  // alternative unit: em
    // or: using a mixture of fixed and relative units
    // border-bottom: calc(0.2rem + 3px) solid #000;
}

Also, although not required in this case, I would recommend you to use pseudo-elements like ::after for such markers in lists, it's basically what those are intended for.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions