Chrome: текст размывается при наклоне назад: skew (-10deg) - ›skew (10deg)

Я просто хочу наклонить родительский элемент и повернуть его обратно к дочернему элементу.

Пример: HTML

<div class="parent"> <!-- skew(-10deg) -->
    <div class="child">Hello</div> <!-- skew(10deg) (skew back) -->
</div>

Пример: CSS

.parent {
    transform: skew(-10deg);
}
.child {
    transform: skew(10deg);
}

Текст внутри выглядит нормально в Firefox, Safari. Но не Chrome и Opera, это немного размыто.

Мне нужно использовать -webkit-backface-visibility: hidden; для уменьшения пиксельного поля в Chrome

Firefox:

Firefox

Chrome:

Chrome

Firefox против Chrome:

FirefoxVSChrome

или увеличено в Photoshop

FirefoxVSChromeZoomed

Живой пример: http://jsfiddle.net/1tpj1kka/

Любая идея ?

ПРИМЕЧАНИЕ !!! : ответ web-tiki - еще одно решение проблемы. Но если кто-нибудь ответит реальным решением этой проблемы с перекосом назад (реальное исправление), я приму ответ.


google-chrome css css-transforms skew
person l2aelba    schedule 16.12.2014    source источник
comment
Почему бы тебе не использовать для этого pseudo-element? Он лучше поддерживает браузер, чем transform.   -  person Vucko    schedule 16.12.2014
comment
@Vucko Неважно? jsfiddle.net/uy061t79/2   -  person l2aelba    schedule 16.12.2014
comment
@ l2aelba Мне это нравится   -  person Vucko    schedule 16.12.2014
comment
@Vucko Спасибо, но я должен поступить так, как я закодировал в моем случае.   -  person l2aelba    schedule 16.12.2014
comment
Визуально приятный вопрос. Как вы создали анимированный gif?   -  person redochka    schedule 30.07.2016
comment
Спасибо, Просто онлайн создатель гифок @redochka   -  person l2aelba    schedule 30.07.2016

Ответы (3)


arrow_upward
7
arrow_downward

«Размытый текст» после двумерных или трехмерных преобразований в браузерах webkit был много раз. Но в вашем случае вы можете применить преобразование только к псевдоэлементу, чтобы на ваш текст не влияло свойство skew.

Это также позволит вам использовать в разметке только один тег:

@import url(https://fonts.googleapis.com/css?family=Oswald);
body{color:#fff;font-weight: bold;font-size:50px;font-family:'Oswald',sans-serif;}

.parent {
    width: 300px;
    overflow: hidden;
    padding-left: 5%;
    position:relative;
}

.parent::before {
    content :'';
    position:absolute;
    top:0;left:0;
    width:100%; height:100%;
    background: rgba(90,190,230,0.9);
    transform-origin:0 0;
    transform:skew(-10deg);
    z-index:-1;
}
<div class="parent">
    Hello
</div>

person web-tiki    schedule 16.12.2014
comment
+ вверх. Хорошая идея. Спасибо - person zur4ik; 19.09.2015
comment
Мой сценарий был немного другим (мне нужно было исправить размытое изображение в перекошенном div), но этот совет мне помог. +1 вверх - person redlena; 21.03.2016

arrow_upward
2
arrow_downward

Добавление translateZ (0) перед преобразованиями, как показано ниже, заставляет графический процессор повторно отображать текст и устраняет размытость в Chrome.

Этот:

transform:  translateZ(0) skew(-10deg);

Не это:

transform: skew(-10deg);
person Angus    schedule 09.01.2016
comment
к сожалению, это больше не работает с текущей версией Chrome 72 - person benedikt; 07.03.2019

arrow_upward
1
arrow_downward

Вы можете попробовать свойство CSS text-rendering: geometricPrecision. Это заставит ваш текст не сглаживаться, что сделает размытость менее важной.

inp.onchange = function(){
   document.querySelector('.child').classList.toggle('geo');
  }
@import url(https://fonts.googleapis.com/css?family=Oswald);body{color:#fff;font-weight:bold;font-size:50px;font-family:'Oswald',sans-serif;}

.geo{
    text-rendering: geometricPrecision;
  }
.parent {

  transform: skew(-10deg);
  -webkit-backface-visibility: hidden;  
  width:300px;padding-left:15%;margin-left:-15%;overflow:hidden;
}

.child {
  transform: skew(10deg);  
  width:300px;background: rgba(90, 190, 230, 0.9);padding-left: 5%;padding-right: 15%;
}
<div class="parent"> <!-- skew(-10deg) -->
    <div class="child geo">Hello</div> <!-- skew(10deg) (skew back) -->
</div>
<input type="checkbox" id="inp" checked="true"/> geometricPrecision

person Kaiido    schedule 12.12.2016
comment
Спасибо, лучше !, но когда я увеличивал масштаб в Photshop, я получил тот же результат. (Chrome на Mac) i.imgur.com/ksgKKPV.png - person l2aelba; 12.12.2016
comment
Да, это не идеально, я добавил переключатель, чтобы вы могли видеть, что он все еще улучшает ситуацию. - person Kaiido; 12.12.2016
comment
Да, лучше: D - person l2aelba; 12.12.2016