2

I am creating a site that where each section is a trapezoid. I used css skew and stack each on top of one another and it is working seamlessly. The one issue I am having is when ever I add an element to the page that uses css 3D transform all content inside section gets blurred. (slick slider, canvas charts. etc... )

Here is a crude example: https://codepen.io/MMDragon3/pen/ZJpdXM

-webkit-transform: skew(0deg, 6deg);
transform: skew(0deg, 6deg);

Any help would be appreciated. Thanks

MMdragon
  • 21
  • 2
  • I'm looking for a solution to this too. Sadly I don't think there is. Like they say here https://stackoverflow.com/questions/4641522/how-to-force-re-render-after-a-webkit-3d-transform-in-safari/4847445#4847445 I don't know if this behavior is standard. If it is that's bad. – Quentin Engles Aug 22 '17 at 18:34

0 Answers0