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

Изглежда, че можете да постигнете очаквания резултат, като просто добавите 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>

Не съм напълно сигурен какво причинява проблема, но както перспективата, така и режимът на смесване-смесване ще създадат нов контекст на подреждане, така че може да има нещо общо с това...

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
}

Какъв беше проблемът?

Определянето на свойствата на вашата перспектива под маркера HTML създава проблеми за съвместимостта на различни браузъри, тъй като може да имате множество елементи под основния си маркер html и браузърът може да не различи как и към кой елемент да се приложи. Вярно е, че свойството перспектива засяга само 3D трансформирани елементи, но не е гаранция, че някой браузър ще го открие и приложи към изображението, посочено като основен фон. Надявам се, че помогна.

person Pouya Ataei    schedule 14.08.2015