Flickering controls in my Wikipedia page

Hello friends,

Project Link - https://codepen.io/tlannoye11/full/RgpqaZ/

I’m trying to create expandable controls for my Wikipedia page using basic CSS transitions and Javascript. However, I’m noticing that if I move the mouse pointer back and forth over certain parts of the page, some of the controls will “flicker” to a new line or something. It’s kind of sporadic, and I’m not entirely sure what’s going on. Any ideas?

During the “closing” of the search part, the elements inside (input field, close button, “search” text) are larger than the container (.hexagonInnerMiddle). The easiest way to solve this:

  overflow: hidden;

@BenGitter https://youtu.be/5VL_5MX7z94

1 Like

@BenGitter sorry to bring this up again, but I’m having the same problem on the left part of my search results. I’ve tried the above solution of adding “overflow: hidden;” to as many places as I can find, but I’m still missing something.

The above link should still work as a demo. To see the problem, enter in some search results and try moving the mouse in and out of the bottom-left hexagon in a similar fashion to the previous problem.