Подтвердить что ты не робот

Mix-blend-mode сломан, когда html имеет "перспективу",

Применяя "перспективу" к элементу html, мой mix-blend-mode, кажется, игнорируется Firefox.

html {
    perspective: 800px; /* causing the issue */
}

div {
    color: #fff;    
    background: linear-gradient(to bottom, #000, orange);
    mix-blend-mode: screen;
}

В чем проблема? Я использую Firefox 40.

http://codepen.io/Type-Style/pen/oXJbRE

Ответ 1

Похоже, вы можете достичь ожидаемого результата, просто добавив mix-blend-mode в элемент html.

Рабочий пример

html {
  background-color: #111;
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/W3C%C2%AE_Icon.svg/210px-W3C%C2%AE_Icon.svg.png);
  background-repeat: no-repeat;
  perspective: 800px;
  mix-blend-mode: screen; /*see change here*/
}
div {
  height: 100px;
  line-height: 100px;
  font-size: 40px;
  color: #fff;
  background: linear-gradient(to bottom, #000, orange);
  mix-blend-mode: screen;
}

<div>Some Text</div>
<div>Some more Text</div>

Ответ 2

Несмотря на то, что при определении свойства perspective для элемента, это элементы CHILD, которые получают представление в перспективе, НЕ самого элемента, вы еще должны вызвать ваш дочерний элемент и присвоить ему нужные свойства CSS, чтобы он работал с кросс-браузером. Коды ниже работают на 100% любого существующего браузера;

html {
    background-color: #111;
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/W3C%C2%AE_Icon.svg/210px-W3C%C2%AE_Icon.svg.png);
    background-repeat: no-repeat;  
} 

div {
    height: 100px; line-height: 100px;
    font-size: 40px;
    color: #fff;    
    background: linear-gradient(to bottom, #000, orange);
    mix-blend-mode: screen;
}

.background-image{
    perspective: 50px; // calling on child element and applying the perspective
}

В чем была проблема?

Определение свойств перспективы в теге HTML вызывает проблемы совместимости кросс-браузеров, так как у вас могут быть многочисленные элементы под основным тегом HTML и браузер не может отличить, как и какой элемент применить к нему. Это правда, что свойство перспективы влияет только на 3D-преобразованные элементы, но это не гарантирует, что любые браузеры обнаруживают и применяют его к изображению, указанному в качестве основного фона. Надеюсь, это помогло.