safariでcssのtransformが反応しない原因がわかった

目次[閉じる][開く]

現象

chromeでは正常なのにsafariだけおかしい…が、
一撃で解決しました。

Chromeでは反応しているのに…

Chromeでは反応しているのに...

safariだと波紋が広がらない…

safariだと波紋が広がらない...

反応しなかったやつ

.sample {
	content: "";
	animation: circle 0.5s;
	animation-fill-mode: forwards;
	z-index: 9999999;
}
@keyframes circle {
	0%{
		transform: scale(0);
		opacity: 1;
		border: 1px solid #000000;
	}
	100%{
		opacity: 0;
		border: 1px solid #000000;
		transform: scale(1);
	}
}

反応したやつ

.sample {
	content: "";
	animation: circle 0.5s;
	animation-fill-mode: forwards;
	z-index: 9999999;
	border: 1px solid #000000; /*ここに一行足しただけ*/
}
@keyframes circle {
	0%{
		transform: scale(0);
		opacity: 1;
		border: 1px solid #000000;
	}
	100%{
		opacity: 0;
		border: 1px solid #000000;
		transform: scale(1);
	}
}

結論

safariでtransformが効いていないわけではなく、
親要素に指示をいれる必要があったということでした。。。

コメントを残す