0

It seems there are some Problems with rendering in Chrome. I roate/skew a container with an inverse child container to get a slanted top and bottom.

When i place a HTML Video or a Slider which uses other CSS transformations, the content and the following HTML gets blurry.

Are there any Workarounds to fix this in Chrome?

Demo: https://codepen.io/anon/pen/BxBpKw

HTML 

<div class="article skew">
  <div class="content skew-inverse">
    <div class="image-background"></div>
      <!-- Content Elements !-->
  </div>
</div>

CSS: 

.article {
  transform: skewY(3deg);
}


.content {
  transform: skewY(-3deg);
}

Result: blurry text after slideshow with transform

rené
  • 114
  • 6
  • @turnip, not pretty sure why this one is a duplicate ? – Temani Afif Apr 17 '18 at 11:14
  • @TemaniAfif transforms cause blurriness in webkit. I've tried to choose a number of dupes with various solutions. The cause of the blurriness is the same. – Turnip Apr 17 '18 at 11:16
  • @Turnip i didn't saw the other one ;) i only saw the first ... by the way we can avoid all this with simple linear-gradient and multiple background – Temani Afif Apr 17 '18 at 11:20

0 Answers0