css transform on svg stroke sometimes prevents rendering

[mic22]

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:

And this is what should appear:

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);
	}
}