css transform on svg stroke sometimes prevents rendering

Copper Contributor

When doing an animation of an svg path elements with css transform, sometimes the elements do not render on page load. You can see it here: Listy Archive – Michał Kuczek (michalkuczek.pl)

This is what I see:

mic22_0-1625732752387.png

And this is what should appear:

mic22_1-1625732771421.png

 

Opening dev tools makes the element render properly. Also sometimes it renders properly immediately. Adding 

 

will-change: transform;

 

has no effect on this bug. 

The unminified css is this:

 

// Newsletter animation
.nl-paper {
	transform: translateY(21px);
	animation: paper 3s ease-in alternate infinite;
	animation-play-state: inherit;
}
.nl-lines path {
	transform: scaleX(0.0001);
	animation: lines 3s ease-in-out alternate infinite;
	transform-origin: 19% 0;
	animation-play-state: inherit;
}
.nl-lines path:nth-child(2) {
	animation-delay: .2s;
}
.nl-lines path:nth-child(3) {
	animation-delay: .4s;
}
.nl-lines path:nth-child(4) {
	animation-delay: .6s;
}
.nl-lines path:nth-child(5) {
	animation-delay: .8s;
}
.nl-cover {
	transform: scaleY(1.01);
	animation: nl-cover 3s ease-in alternate infinite;
	transform-origin: 0 34.375%;
	animation-play-state: inherit;
}
.nl-top {
	transform: scaleY(0);
	animation: nl-top 3s ease-out alternate infinite;
	transform-origin: 0 34.375%;
	animation-play-state: inherit;
}

@keyframes paper {
	0% {
		transform: translateY(21px);
	}
	20% {
		transform: translateY(21px);
	}
	50% {
		transform: translateY(-21px);
	}
	60% {
		transform: translateY(-17px);
	}
	100% {
		transform: translateY(-17px);
	}
}
@keyframes lines {
	0% {
		transform: scaleX(0);
	}
	45% {
		transform: scaleX(0);
	}
	70% {
		transform: scaleX(1);
	}
	100% {
		transform: scaleX(1);
	}
}
@keyframes nl-cover {
	0% {
		transform: scaleY(1);
	}
	10% {
		transform: scaleY(1);
	}
	20% {
		transform: scaleY(1.15);
	}
	30% {
		transform: scaleY(0);
	}
	100% {
		transform: scaleY(0);
	}
}
@keyframes nl-top {
	30% {
		transform: scaleY(0);
	}
	40% {
		transform: scaleY(1);
	}
	100% {
		transform: scaleY(1);
	}
}

 

0 Replies