Hello everyone, i have been working on my portfolio and I've been building some projects to include in my portfolio, I have done a todo list app,but this morning I opened it up in chrome, added a new task and hovered over the new task, and the height started jittering, I honestly don't know what is causing this,so i can't find a fix for it. I test my projects primarily on Firefox developer edition and it works perfectly fine in Firefox.
For further actions, you may consider blocking this person and/or reporting abuse
Top comments (1)
I think I know what you're talking about with the height jittering, but not exactly sure. You'll need to elaborate on what exactly is jittering.
My first guess after a quick skim is that you're talking about the task actions appearing and disappearing really quickly. Looks like you have a mouseover event on the whole cards div
<div class="cards">that adds the<div class="actionsDiv">, and then a mouseout event that removes the<div class="actionsDiv">.I think instead of creating the actionsDiv via JS and having events append and remove it, you could write in the actionsDiv into the HTML to begin with. Then you would use your mouseon/out events to change the CSS as necessary. See "#11: Make some content visible only for screen readers" of this post for an example.
Also, I think you might need to make your
<div class="cards">larger with some padding or margins (or something), so when you hover over it and hover your cursor into theactionsDiv, the cursor won't exit the cards div completely and hide the actionsDiv.Hope that helps!