Flickering controls in my Wikipedia page

1

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?

2

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:

.hexagonInnerMiddle{
  ....
  overflow: hidden;
}
3

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

1 Like
4

@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.