one question regarding your Codepen example, as it seems to face the same issue as we are experiencing for our usecase.
At the 'touch-area' of two shapes (or in your example the area where the two masked svg-shapes touch), browsers do render a thin line when the shapes are positioned in certain orientations in 3d-space.
I modified you Codepen example so that the ring is being filled with white color:
Now you should be able to see a thin line being rendered where the two shapes touch. We could observe this behavior for Chrome and FF on Windows as well for Chrome and FF on Mac. I attached a screenshot where the rendering-error is visible, too:
rotate 3D element overlapping another element?
in GSAP
Posted
Hi Diaco,
one question regarding your Codepen example, as it seems to face the same issue as we are experiencing for our usecase.
At the 'touch-area' of two shapes (or in your example the area where the two masked svg-shapes touch), browsers do render a thin line when the shapes are positioned in certain orientations in 3d-space.
I modified you Codepen example so that the ring is being filled with white color:
Now you should be able to see a thin line being rendered where the two shapes touch. We could observe this behavior for Chrome and FF on Windows as well for Chrome and FF on Mac. I attached a screenshot where the rendering-error is visible, too:
Any ideas how to fix this issue?
Best,
Clemens