css transform on svg stroke sometimes prevents rendering

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: https://michalkuczek.pl/newsletter/

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