背景を斜めにする手法はいくつもあるが、transform: skewYを使った場合、特定の条件下で文字がぼやける、文字がにじむ、といった症状が発生することがある。

自分が遭遇した時は以下のケースだった。

  • sliderを使った時
  • CSSでanimationを使った時

そんな場合は、skewを設定した包含ブロックにbackface-visibility: hidden;を追記する。

.item {
	transform: skewY(-7deg);
	-webkit-backface-visibility: hidden; ★コレ
	backface-visibility: hidden; ★コレ
}

これで、基本的には解決する。ただ、それでも文字が少し太く見えたり、と言ったケースがあった。これに関しては対処法はまだ見つかっていない。。(20年10月)