Divblock 1px height changes after vertical animation

Hi everyone!

I am having some problems with lines on my websites. I have 1px lines (made from divblocks) throughout my site, which are sometimes animated to appear on hoover (see collectie page for an example).
Sometimes this goes as it should but other times (totally random) the lines become thicker at the end of the animation.

For example the collectie page is made with a cms collection, but with some photos the line stays 1px but with others the lines get thicker at the end of the hoover animation. This is shown on the published site, but not in the preview in the editor.

Does someone know how to fix this bug?

Thanks in advance!

If your not changing something leave it at default.
So on you interactions, default and change to, click the little icon on left to make it turn grey.
Also not sure why you had Z of 1.
Try what I have suggested as a starting point.

1 Like

Hi, thanks for your reply!

At first I had it as a default, but I changed it to 1 to see if it made any difference. Now I changed it back to default, but it is still showing the same problem.

Do you have some other suggestions maybe?

Thanks in advance!

Didn’t notice the live link.
I’m using Microsoft edge and I have not seen any issue so far.

Have you checked the 2nd and 4th row? Because on my computer the issue is appears only in these two rows and not on the 1st en 3th row.

If I use microsoft egde the issue is not appearing on the collection page, but is does appear on the news page for example…

checked the news down then up then down the up etc several times and resize nothing.
This in on the published site too.
Can you press print screen to take a screen shot to show what you are seeing.

So on the top image you can see the line as 1 px. On the lower image you can see that when it finishes the animation the line has become thicker…

I watched in on different computers and browsers and everywhere it looks different. Just randomly

As a random thought set overflow hidden

Mmm good idea. But unfortunately it didn’t work.

try transparent for background, 1px bottom border black

Thank you so much! This works!

brilliant. i know what its like to have something bothering them.

1 Like