how to fix this ?

When I use hover that time the whole elements is moving.. how can I fix react
14 Replies
Malik
Malik13mo ago
Are you using border bottom on hover?
Stephin Maju
Stephin Maju13mo ago
Yes bro
Malik
Malik13mo ago
try using box-shadow;
ἔρως
ἔρως13mo ago
or, set a transparent border for everything then, on hover, change the border color
Zoë
Zoë13mo ago
Or swap a margin for border
ἔρως
ἔρως13mo ago
wont that trigger a re-layout? instead of simply re-drawing that single element?
vince
vince13mo ago
Make it position relative on hover
Zoë
Zoë13mo ago
Hmm, it would
vince
vince13mo ago
What's a re-layout/re-drawing?
Zoë
Zoë13mo ago
Essentially if a web page is static and it's not being resized the browser doesn't need to recalculate the sizes and positions of elements. However, if you change the size of an element it needs to figure it out. The method I suggested changes properties that would change the size and so recalculations are needed. The end result should be the same with no shifting but it is still needing re-drawing. CSS animations are better at this because browsers know what to expect. For most people there will be no noticeable effect unless the page has a lot of complexity, which the page shown seems to not have. But it is absolutely true that it is a non-zero amount more intensive. I would have gone for box-shadow but I think that shifting a margin wouldn't be bad as you'd want a margin anyway to create additional spacing below
vince
vince13mo ago
thanks!
ἔρως
ἔρως13mo ago
but in this case, the idea isn't to create space, but to add a border on hover. which is why i suggested to just have the transparent border and pretend it's a margin, which can then be recolored i know there's the outline, but messing about with it without knowing what you're doing can make things pretty hard to use in an accessible way
Stephin Maju
Stephin Maju13mo ago
Thank you guys 🙏😁
ἔρως
ἔρως13mo ago
you're welcome just out of curiosity, which solution did you use?
Want results from more Discord servers?
Add your server