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
VEED
VEED
VEED - Screen Recording - Oct 11, 2023
Make stunning videos with a single click. Cut, trim, crop, add subtitles and more. Online, no account needed. Try it now, free. VEED
5 Replies
ZEROHEART
ZEROHEART•13mo 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
Jus Sus || 💀
Jus Sus || 💀•13mo ago
@ZEROHEART Thanks!!, do you know how to remove the input going out of searchWrapper on right side before expanding.
ZEROHEART
ZEROHEART•13mo ago
where!?
Jus Sus || 💀
Jus Sus || 💀•13mo ago
@ZEROHEART you can check the codepen. the input jumps out on the right side for a second before it expands
ZEROHEART
ZEROHEART•13mo ago
its coming with search icon
Want results from more Discord servers?
Add your server