Witam,
mam specyficzny problem z transformacjami CSS w Chromie. Jeżeli na stronie jest gdziekolwiek zastosowana translacja3d a element z skew ma overflow: hidden to elementy wewnątrz są rozmyte. Niestety potrzebuje overflow: hidden na tym elemencie, oraz zewnętrzny plugin jQuery korzysta z translate3d. Dodanie translacji3d do elementów z skew trochę pomaga, no ale niestety tylko trochę. Czy ktoś spotkał podobny problem i ma pomysł na rozwiązanie? Potrzebuję pilnie rozwiązać ten problem, a szukałem już naprawdę sporo czasu i nic do końca nie pomaga.
https://jsfiddle.net/hwmdkr6j/
<div class="z">
XXX
</div>
<div class="a">
<div class="b">
<span class="c">
Lorem ipsum dolor sit amet.
</span>
</div>
</div>
.a {
background: red;
display: inline-block;
padding: 20px;
transform: skewY(-3deg) translate3d(0, 0, 0);
overflow: hidden; /* To jest mi niezbędne */
}
.b {
color: #fff;
transform: skewY(3deg) translate3d(0, 0, 0);
font-size: 32px;
}
.c {
background: white;
color: blue;
}
.z {
transform: translate3d(2px, 0, 0); /* To jest niezbędne, ponieważ korzysta z tego zewnętrzny plugin jQuery */
}