CODEWITHSUNDEEP
javascripthtmlcss
lmenus
lmenus

Reputation: 613

Random lines in Safari?

I realise this is a bit off shot, but I will try.

I have never experienced anything like this before - I am building an accordion for the page, and when I expand it, random lines appear below the expanded item (see image).

enter image description here

The most visible line is a separator and should be there, however I have no idea where the other ones come from. This quirk is not replicated in Chrome nor Mozilla.

Moreover, if I do not have web inspector opened and I open it, the lines disappear. This leads me to believe it might be some issue with painting the DOM element, possibly the mentioned border-bottom?

Anyone has ever experienced anything like this before? Being the perfectionist I am with OCD, I find it extremely annoying!

Upvotes: 1

Views: 244

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206121

Add to your animated element:

transform: translateZ(0);

to enable Hardware accelerated animations.
Safari will then remove those residual liny glitches.

Also -webkit-backface-visibility:hidden; might help to remove edged lines that usually appear in Chrome (if you apply rotations...).

Upvotes: 1

Related Questions