Fixed position element causing issue on hover

https://www.veed.io/view/415c35b6-2139-4b4b-a0a5-3ac0852561e2?panel=share. I have attached a video above. The search element is positioned fixed 550px from top. then expanding of seachbar works fine when i dont scroll. but when i scroll and then hover it glitches. I switched to position absolute then that glitch affect goes away but i will not same fixed position relative to viewport. Here is the code: codepen: https://codepen.io/stressunfit/pen/gOZEmWp?editors=1100

Make stunning videos with a single click. Cut, trim, crop, add subtitles and more. Online, no account needed. Try it now, free. VEED

CodePen

...

5 Replies

ZEROHEART•14mo ago

.searchIconWrapper:hover {
  width: 280px;
  /* padding-left: 20px; */
  height:68px;
  border-radius: 20px;
  justify-content: start;
}

.searchIconWrapper:hover {
  width: 280px;
  /* padding-left: 20px; */
  height:68px;
  border-radius: 20px;
  justify-content: start;
}

upated for codepen given removed position

@ZEROHEART Thanks!!, do you know how to remove the input going out of searchWrapper on right side before expanding.

ZEROHEART•14mo ago

where!?

@ZEROHEART you can check the codepen. the input jumps out on the right side for a second before it expands

ZEROHEART•14mo ago

its coming with search icon