css transform on svg stroke sometimes prevents rendering

%3CLINGO-SUB%20id%3D%22lingo-sub-2527080%22%20slang%3D%22en-US%22%3Ecss%20transform%20on%20svg%20stroke%20sometimes%20prevents%20rendering%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2527080%22%20slang%3D%22en-US%22%3E%3CP%3EWhen%20doing%20an%20animation%20of%20an%20svg%20path%20elements%20with%20css%20transform%2C%20sometimes%20the%20elements%20do%20not%20render%20on%20page%20load.%26nbsp%3B%3C%2FP%3E%3CP%3EThis%20is%20what%20I%20see%3A%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22mic22_0-1625732752387.png%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F294234iA75A6EB680E71C78%2Fimage-size%2Fmedium%3Fv%3Dv2%26amp%3Bpx%3D400%22%20role%3D%22button%22%20title%3D%22mic22_0-1625732752387.png%22%20alt%3D%22mic22_0-1625732752387.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3EAnd%20this%20is%20what%20should%20appear%3A%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22mic22_1-1625732771421.png%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F294235iF4CB605DB9B9D56C%2Fimage-size%2Fmedium%3Fv%3Dv2%26amp%3Bpx%3D400%22%20role%3D%22button%22%20title%3D%22mic22_1-1625732771421.png%22%20alt%3D%22mic22_1-1625732771421.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EOpening%20dev%20tools%20makes%20the%20element%20render%20properly.%20Also%20sometimes%20it%20renders%20properly%20immediately.%20Adding%26nbsp%3B%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-css%22%3E%3CCODE%3Ewill-change%3A%20transform%3B%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3Ehas%20no%20effect%20on%20this%20bug.%26nbsp%3B%3C%2FP%3E%3CP%3EThe%20unminified%20css%20is%20this%3A%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-css%22%3E%3CCODE%3E%2F%2F%20Newsletter%20animation%0A.nl-paper%20%7B%0A%20transform%3A%20translateY(21px)%3B%0A%20animation%3A%20paper%203s%20ease-in%20alternate%20infinite%3B%0A%20animation-play-state%3A%20inherit%3B%0A%7D%0A.nl-lines%20path%20%7B%0A%20transform%3A%20scaleX(0.0001)%3B%0A%20animation%3A%20lines%203s%20ease-in-out%20alternate%20infinite%3B%0A%20transform-origin%3A%2019%25%200%3B%0A%20animation-play-state%3A%20inherit%3B%0A%7D%0A.nl-lines%20path%3Anth-child(2)%20%7B%0A%20animation-delay%3A%20.2s%3B%0A%7D%0A.nl-lines%20path%3Anth-child(3)%20%7B%0A%20animation-delay%3A%20.4s%3B%0A%7D%0A.nl-lines%20path%3Anth-child(4)%20%7B%0A%20animation-delay%3A%20.6s%3B%0A%7D%0A.nl-lines%20path%3Anth-child(5)%20%7B%0A%20animation-delay%3A%20.8s%3B%0A%7D%0A.nl-cover%20%7B%0A%20transform%3A%20scaleY(1.01)%3B%0A%20animation%3A%20nl-cover%203s%20ease-in%20alternate%20infinite%3B%0A%20transform-origin%3A%200%2034.375%25%3B%0A%20animation-play-state%3A%20inherit%3B%0A%7D%0A.nl-top%20%7B%0A%20transform%3A%20scaleY(0)%3B%0A%20animation%3A%20nl-top%203s%20ease-out%20alternate%20infinite%3B%0A%20transform-origin%3A%200%2034.375%25%3B%0A%20animation-play-state%3A%20inherit%3B%0A%7D%0A%0A%40keyframes%20paper%20%7B%0A%200%25%20%7B%0A%20%20transform%3A%20translateY(21px)%3B%0A%20%7D%0A%2020%25%20%7B%0A%20%20transform%3A%20translateY(21px)%3B%0A%20%7D%0A%2050%25%20%7B%0A%20%20transform%3A%20translateY(-21px)%3B%0A%20%7D%0A%2060%25%20%7B%0A%20%20transform%3A%20translateY(-17px)%3B%0A%20%7D%0A%20100%25%20%7B%0A%20%20transform%3A%20translateY(-17px)%3B%0A%20%7D%0A%7D%0A%40keyframes%20lines%20%7B%0A%200%25%20%7B%0A%20%20transform%3A%20scaleX(0)%3B%0A%20%7D%0A%2045%25%20%7B%0A%20%20transform%3A%20scaleX(0)%3B%0A%20%7D%0A%2070%25%20%7B%0A%20%20transform%3A%20scaleX(1)%3B%0A%20%7D%0A%20100%25%20%7B%0A%20%20transform%3A%20scaleX(1)%3B%0A%20%7D%0A%7D%0A%40keyframes%20nl-cover%20%7B%0A%200%25%20%7B%0A%20%20transform%3A%20scaleY(1)%3B%0A%20%7D%0A%2010%25%20%7B%0A%20%20transform%3A%20scaleY(1)%3B%0A%20%7D%0A%2020%25%20%7B%0A%20%20transform%3A%20scaleY(1.15)%3B%0A%20%7D%0A%2030%25%20%7B%0A%20%20transform%3A%20scaleY(0)%3B%0A%20%7D%0A%20100%25%20%7B%0A%20%20transform%3A%20scaleY(0)%3B%0A%20%7D%0A%7D%0A%40keyframes%20nl-top%20%7B%0A%2030%25%20%7B%0A%20%20transform%3A%20scaleY(0)%3B%0A%20%7D%0A%2040%25%20%7B%0A%20%20transform%3A%20scaleY(1)%3B%0A%20%7D%0A%20100%25%20%7B%0A%20%20transform%3A%20scaleY(1)%3B%0A%20%7D%0A%7D%3C%2FCODE%3E%3C%2FPRE%3E%3C%2FLINGO-BODY%3E
New 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