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

Применяя "perspective" к элементу 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


css css-transforms blending
person Type-Style    schedule 31.07.2015    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Похоже, вы можете добиться ожидаемого результата, просто добавив режим смешивания в 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>

Я не совсем уверен, что вызвало проблему, но и перспектива, и смешанный режим смешивания создадут новый контекст стека, поэтому он может иметь какое-то отношение к этому...

person apaul    schedule 12.08.2015
comment
Stackingcontext может быть проблемой. Я переключил перспективу с непрозрачностью: 0,99 и получил тот же результат. - person Type-Style; 29.10.2015

arrow_upward
1
arrow_downward

Несмотря на то, что при определении свойства perspective для элемента вид в перспективе получают элементы CHILD, а НЕ сам элемент, вы все равно< /strong> должен вызывать ваш дочерний элемент и назначать ему нужные свойства перспективы 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
}

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

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

person Pouya Ataei    schedule 14.08.2015