JQuery Hover Flicker On Dropdowns

Question

I'm trying to toggle between the categories in the JSFiddle below, it works fine aside from there's a flicker when hides and shows the new content.

Is there a way to fix this?

https://jsfiddle.net/0q7fzh6u/1/

Cheers

// Overlay dropdown menu
var menuItem = $(".header-categories-item");
var categoriesDropdown = $(".header-categories-dropdown");
menuItem.hover(function() {
  $("body").toggleClass("overlay-visible");
  $(this).children(categoriesDropdown).toggleClass("categories-dropdown-visible");
});

.header-categories {
  position: relative;
  clear: both;
  background: #fff;
  z-index: 10;
}

.header-categories-list {
  margin-bottom: 0;
}

.header-categories-item {
  display: inline-block;
  vertical-align: top;
  letter-spacing: 0.2rem;
  line-height: 1;
  font-size: 13px;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 15px;
  padding-right: 15px;
}

.header-categories-item a {
  color: #000;
}

.header-categories-item-block {
  display: block;
  padding: 0;
  border-top: 1px solid $black;
}


/* overlay */

#site-overlay {
  visibility: hidden;
  opacity: 0;
  z-index: 5;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #999;
  transition: .25s;
}

.overlay-visible #site-overlay {
  visibility: visible;
  opacity: 1;
}


/* Dropdown */

.header-categories-dropdown {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  min-height: 300px;
  padding: 15px 0;
  background: #fff;
}

li {
  padding-bottom: 15px;
  padding-left: 15px;
  padding-right: 15px;
}

.header-categories-dropdown.categories-dropdown-visible {
  visibility: visible;
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
HTML

<div id="site-overlay"></div>
<div class="header-categories pull-right hidden-xs hidden-sm">
  <ul class="header-categories-list list-unstyled">
    <li class="header-categories-item header-categories-item-active"><a href="<?php echo $category['href']; ?>">category name 1</a>
      <ul class="header-categories-dropdown list-unstyled">
        <li><a href="#">test 1</a></li>
        <li><a href="#">test 2</a></li>
      </ul>
    </li>
    <li class="header-categories-item header-categories-item-active"><a href="#">category name 2</a>
      <ul class="header-categories-dropdown list-unstyled">
        <li><a href="#">test 3</a></li>
        <li><a href="#">test 4</a></li>
      </ul>
    </li>
  </ul>
</div>

If I inspect the source there's a weird `o` in between the two `
Adding `background: red;` to the `li` will make the gap obvious. It is caused by whitespace between the `li`-tags. — Imanuel, May 15 '17 at 09:56
The background of #site-overlay is causing the flicker. For a split second the background will turn grey and then white. Make the background white and the problem is gone. — Gerard, May 15 '17 at 10:04
@Gerard: That's not a solution if the background of the popup is supposed to have a different colour. — Imanuel, May 15 '17 at 10:12

score 1 · Accepted Answer · answered May 15 '17 at 10:00

1

What's causing this problem is that there is a gap between the li tags .header-categories-item, so whenever you hover over this gap you get the flick

You can remove the gap by adding margin-right: -5px; to .header-categories-item

See updated fiddle

answered May 15 '17 at 10:00

Chiller

9,520
2
28
38

score 1 · Answer 2 · edited May 23 '17 at 12:03

If you remove the whitespace between the two li-tags, the flicker is gone.
I don't know how to remove the gap in CSS, though. Removing it by margin-right: -5px as Chiller has proposed seems not very reliable to me - maybe the gap is smaller or bigger in a different browser?

Edit
Found a solution: You can set font-size: 0; on the ul to remove the gap.

// Overlay dropdown menu
var menuItem = $(".header-categories-item");
var categoriesDropdown = $(".header-categories-dropdown");
 menuItem.hover(function() {
       $("body").toggleClass("overlay-visible");
       $(this).children(categoriesDropdown).toggleClass("categories-dropdown-visible");
 });

.header-categories {
          position: relative;
          clear: both;
          background: #fff;
          z-index: 10;
        }
        
        .header-categories-list {
          margin-bottom: 0;
          font-size: 0;
        }
        
        .header-categories-item {
          display: inline-block;
          vertical-align: top;
          letter-spacing: 0.2rem;
          line-height: 1;
          font-size: 13px;
          padding-top: 15px;
          padding-bottom: 15px;
          padding-left: 15px;
          padding-right: 15px;
        }
        
        .header-categories-item a {
          color: #000;
        }
        
        .header-categories-item-block {
          display: block;
          padding: 0;
          border-top: 1px solid $black;
        }
        /* overlay */
        
        #site-overlay {
          visibility: hidden;
          opacity: 0;
          z-index: 5;
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: #999;
          transition: .25s;
        }
        
        .overlay-visible #site-overlay {
          visibility: visible;
          opacity: 1;
        }
        /* Dropdown */
        
        .header-categories-dropdown {
          visibility: hidden;
          opacity: 0;
          position: absolute;
          top: 100%;
          left: 0;
          width: 100%;
          min-height: 300px;
          padding: 15px 0;
          background: #fff;
        }
        
        li {
          padding-bottom: 15px;
          padding-left: 15px;
          padding-right: 15px;
        }
        
        .header-categories-dropdown.categories-dropdown-visible {
          visibility: visible;
          opacity: 1;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
HTML

    <div id="site-overlay"></div>
    <div class="header-categories pull-right hidden-xs hidden-sm">
      <ul class="header-categories-list list-unstyled">
        <li class="header-categories-item header-categories-item-active"><a href="<?php echo $category['href']; ?>">category name 1</a>
          <ul class="header-categories-dropdown list-unstyled">
            <li><a href="#">test 1</a></li>
            <li><a href="#">test 2</a></li>
          </ul>
        </li>
        <li class="header-categories-item header-categories-item-active"><a href="#">category name 2</a>
          <ul class="header-categories-dropdown list-unstyled">
            <li><a href="#">test 3</a></li>
            <li><a href="#">test 4</a></li>
          </ul>
        </li>
      </ul>
    </div>

So either this, or you remove the whitespace in the HTML code:

<!-- ... -->
</li><li class="header-categories-item header-categories-item-active">
<!-- ... -->

// Overlay dropdown menu
var menuItem = $(".header-categories-item");
var categoriesDropdown = $(".header-categories-dropdown");
 menuItem.hover(function() {
       $("body").toggleClass("overlay-visible");
       $(this).children(categoriesDropdown).toggleClass("categories-dropdown-visible");
 });

.header-categories {
          position: relative;
          clear: both;
          background: #fff;
          z-index: 10;
        }
        
        .header-categories-list {
          margin-bottom: 0;
        }
        
        .header-categories-item {
          display: inline-block;
          vertical-align: top;
          letter-spacing: 0.2rem;
          line-height: 1;
          font-size: 13px;
          padding-top: 15px;
          padding-bottom: 15px;
          padding-left: 15px;
          padding-right: 15px;
        }
        
        .header-categories-item a {
          color: #000;
        }
        
        .header-categories-item-block {
          display: block;
          padding: 0;
          border-top: 1px solid $black;
        }
        /* overlay */
        
        #site-overlay {
          visibility: hidden;
          opacity: 0;
          z-index: 5;
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: #999;
          transition: .25s;
        }
        
        .overlay-visible #site-overlay {
          visibility: visible;
          opacity: 1;
        }
        /* Dropdown */
        
        .header-categories-dropdown {
          visibility: hidden;
          opacity: 0;
          position: absolute;
          top: 100%;
          left: 0;
          width: 100%;
          min-height: 300px;
          padding: 15px 0;
          background: #fff;
        }
        
        li {
          padding-bottom: 15px;
          padding-left: 15px;
          padding-right: 15px;
        }
        
        .header-categories-dropdown.categories-dropdown-visible {
          visibility: visible;
          opacity: 1;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
HTML

    <div id="site-overlay"></div>
    <div class="header-categories pull-right hidden-xs hidden-sm">
      <ul class="header-categories-list list-unstyled">
        <li class="header-categories-item header-categories-item-active"><a href="<?php echo $category['href']; ?>">category name 1</a>
          <ul class="header-categories-dropdown list-unstyled">
            <li><a href="#">test 1</a></li>
            <li><a href="#">test 2</a></li>
          </ul>
        </li><li class="header-categories-item header-categories-item-active"><a href="#">category name 2</a>
          <ul class="header-categories-dropdown list-unstyled">
            <li><a href="#">test 3</a></li>
            <li><a href="#">test 4</a></li>
          </ul>
        </li>
      </ul>
    </div>

Both work, but I'd prefer the CSS solution (or both).

Yeah so because the list items were inline-block elements it was added hidden extra 4px spacing. Cheers! — Joe Consterdine, May 15 '17 at 10:37

JQuery Hover Flicker On Dropdowns

2 Answers2