Lines appearing after animation (issue on Chrome, Opera)

[Mantvydas 11 Likes (Newbie)]

On Chrome and Opera after animating (opening) div (door) lines around that div appears. Tried adding translateZ(0), but then even worse - lines appears after page loads, you don't even need to animate.. On Mozilla and Edge seems fine.

 

Can GSAP fix this issue?

 

I tried adding something like this on hover event:

TweenMax.to(".door", 2,{rotationY:13, transformPerspective:300, transformStyle:"preserve-3d",repeat:1, yoyo:true}});

 but doesnt work at all..

 

Thanks,

 

Mantvydas

See the Pen KoYPEP by MantvydasBinderis (@MantvydasBinderis) on CodePen

[Acccent 358 Likes (Leader)]

I can't see anything and I'm using a Chromium browser, could you take a screenshot please?

[GreenSock 8,117 Likes (Superhero)]

Hm, your codepen doesn't seem to use GSAP at all. 

 

Strangely, I noticed that adding "border: 1px solid black" to the door seemed to clear things up in my browser at least. Does that help on your end?  

[Mantvydas 11 Likes (Newbie)]

Here You can see these lines.

Sorry Jack, I just tried to add GSAP on main code, didnt add to codepen.

 

And with border still the same. Can it be that only on my pc these lines appearing? 

 

How I can make same action using GSAP? Or for such animation there is no need to use GSAP?

[GreenSock 8,117 Likes (Superhero)]

I don't see those lines, sorry. But here's a similar animation with GSAP:

See the Pen BrEaWX?editors=0010 by GreenSock (@GreenSock) on CodePen

Sounds like a browser rendering issue, possibly related to your video card. Perhaps you'll need to adjust the size of the door so that it's a pixel (or half pixel) larger in each direction. 

 

[Mantvydas 11 Likes (Newbie)]

Thank you Jack

[Mantvydas 11 Likes (Newbie)]

Hmm,  when I removed 'transition: all 1s ease;',  ofc there is no more animation, but lines are gone!

[GreenSock 8,117 Likes (Superhero)]

6 minutes ago, Mantvydas said:

Hmm,  when I removed 'transition: all 1s ease;',  ofc there is no more animation, but lines are gone!

 

That's probably because there's no more 3D transforms on the element. When there are any 3D transforms, most browsers treat it COMPLETELY differently from a rendering perspective, layerizing it and pushing it over to the GPU to handle in 3D space. 

[Visual-Q 586 Likes (Leader)]

I can see the lines in Chrome on my mac in both the original and gsap version. They don't appear in Safari or Firefox.

 

They appear and disappear depending on window size, sometimes top bottom sometimes left right sometimes all around. I've seen it before on other '3d' objects in chrome where items need to line up perfectly, it's a real pain. A subpixel rendering issue maybe?

[Visual-Q 586 Likes (Leader)]

Played with this a bit and ended up with a rather bizarre solution.

 

I added an extra 2 pixels to the size of the door then offset it -1px top bottom which fixed the outline issue however Chrome wasn't done messing up yet. At least not on my machine. Another subpixel display anomaly presented as a semitransparent horizontal line across the door at about 75% of the way down that rotated with the animation. So I duplicated the door object over top of itself and it appears to render solid.

 

Inspired by a photoshop trick I use to make semitransparent pixels more opaque, duplicate the layer a few times and flatten them together.

 

Of course to the people who couldn't see the issue to begin with it looks like I did nothing at all. 

 

See the Pen vRMKNa by Visual-Q (@Visual-Q) on CodePen

 

 

[GreenSock 8,117 Likes (Superhero)]

Nice work, @Visual-Q. Very odd that you have to do all that just to get Chrome to render properly. Sheesh. I actually did see that odd line about 75% of the way down the door. SO WEIRD! 

[KerryRuddock 13 Likes (Newbie)]

Nice work Visual-Q.

 

I was reading this post on Stack Oveflow and was playing around with the css outline property with an inset-style to try and get this to work.

[Visual-Q 586 Likes (Leader)]

7 minutes ago, KerryRuddock said:

I was reading this post on Stack Oveflow and was playing around with the css outline property with an inset-style to try and get this to work.

 

Thanks I'll check it out.

[Visual-Q 586 Likes (Leader)]

I'm not too familiar with some of the more advanced rendering options but could css will change or perhaps window.requestAnimationFrame() be used to help Chrome render these things better?

[Visual-Q 586 Likes (Leader)]

It boggles my mind that they put a man on the moon in less than a decade when the total computing power of North America was probably less than a single iPhone and after twenty some years the biggest tech companies in the world still can't manage to get css to render consistently.

[Mantvydas 11 Likes (Newbie)]

13 hours ago, Visual-Q said:

It boggles my mind that they put a man on the moon in less than a decade when the total computing power of North America was probably less than a single iPhone and after twenty some years the biggest tech companies in the world still can't manage to get css to render consistently.

Was thinking the same.

 

Thank you for spending your time just to help me out. I really appreciate it

 

You said "I've seen it before on other '3d' objects in chrome where items need to line up perfectly".

What you mean by saying items need to line up perfectly? Line up with what? 

 

Sorry for asking these kind of questions, I am still kind of beginner in coding.

 

[Visual-Q 586 Likes (Leader)]

21 minutes ago, Mantvydas said:

You said "I've seen it before on other '3d' objects in chrome where items need to line up perfectly".

What you mean by saying items need to line up perfectly? Line up with what? 

 

Basically where an object on a 3d layer should be flush against some other element.

 

For instance I had a grid of elements that were flush against one another and I was using a card flip/hover effect that kept introducing spaces similar to your outline problem. 

[Mantvydas 11 Likes (Newbie)]

Yesterday when I removed  'transition: all 1s ease;' and animate it with GSAP,  these outline  'ghost pixles' gone, but there is one last problem with that door animation. When I open the door on Mozilla, top and bottom lines get pixelated, not smooth at all while on all other browsers these top and bottom lines of the door are much more smoother.

[PointC 8,599 Likes (Superhero)]

Please try adding this to your .door CSS:

 

outline: 1px solid transparent;

 

Happy tweening.

 

[Mantvydas 11 Likes (Newbie)]

25 minutes ago, PointC said:

Please try adding this to your .door CSS:

 

outline: 1px solid transparent;

 

Happy tweening.

 

It really smoothed things up on Mozilla. Thanks Craig!

[Visual-Q 586 Likes (Leader)]

46 minutes ago, Mantvydas said:

It really smoothed things up on Mozilla. Thanks Craig!

 

If you're able to post the final solution as a pen or link I'd be interested in seeing it.

[Mantvydas 11 Likes (Newbie)]

Sure Visual-Q, here you go.

 

See the Pen KoYPEP?editors=0110 by MantvydasBinderis (@MantvydasBinderis) on CodePen

 

Actualy nothing helped to me so I finally found my own small hack.

To parent div I added:

border:1px solid black;

And for children (door) I added 1px extra to the height and 2px extra to the width and also I set left to -1px.

And voilà! Its worked for me, no more those ugly outlines