Chrome中的混合混合模式问题 [英] mix-blend-mode issues in Chrome

问题描述

我一直试图在包含css不透明转换实例的页面上使用混合混合模式。看起来发生的情况是，包含混合混合模式的div在过渡期间显示为没有混合模式，或者更确切地说，当动画正在进行时。我只在Chrome中发现它是一个问题。

在我的示例中，虽然div正在将混合模式显示正确地转换为图像，但不会覆盖页面背景。一旦转换完成，它就会返回到显示状态。换句话说，当动画正在进行时，混合的div在黑色背景上显示为纯黄色，但由于它被设置为变暗，因此它应该在黑色背景下隐藏。一旦动画完成，它应该会出现。它看起来正常的图像。

我试过这是Firefox和Safari，似乎没有问题。

笔： http://codepen.io/anon/pen/QGGVOX

p>

编辑 - 我发现了另一个不涉及任何动画的情况。奇怪的是，当一个div的位置设置为固定而另一个是绝对位置时，会发生这种情况，请参见： http：/ /codepen.io/anon/pen/wooRME 如果div .image的位置更改为绝对，那么混合模式显示为正常。

  body {
 background：＃000; 
} 
 
 .blend {
 height：650px; 
宽度：50％; 
 background-color：yellow; 
 mix-blend-mode：darken; 
位置：绝对; 
 opacity：1; 
剩下：0; 
 top：0px; 
 z-index：100; 
} 
 
 img {
 position：relative; 
 z-index：0; 
 
  

解决方案

问题。在动画过程中，身体似乎不算作一个元素，因此使得黄色出现在1个不透明的位置。我使用其他混合模式进行测试，并且它总是呈现黄色。 （当设置为'差异预期的结果将是白色而不是黄色的）

所以修复？只需添加一个100％大小和黑色背景的div！然后，黄色有东西混合，并没有显示出来。

以下是您的笔中的代码：

html - 添加了bg div：

 < div class =bg>< / div> ; 
< div class =blend>< / div> 
< img src =http://lorempixel.com/500/500/> 
  

这是css：

  .bg {
 background：＃000; 
位置：绝对; 
宽度：100％; 
身高：100％; 
保证金：0; 
} 
 body {
 background：＃000; 
宽度：100％; 
身高：100％; 
保证金：0; 
} 
  

我也更改了正文以填充窗口，所以页边不是黄色太。或者，可以根据身体的功能调整混合div的大小。

标记@chrscblls，因为他们想知道您是否找到任何东西。

---

编辑： 对于其他codepen，问题不是'同样的寿。他们试图将图像和黄色矩形变暗为灰色背景。

如果他们不希望黄色显示在他们的灰色背景上，那么解决方案很简单将图像放入div中并使用:: after混合颜色。或者甚至只是制作一个空白的div，将其作为背景图像并使用:: after。

这个：

 < DIV /> 
  

附带：

  body {
 background：＃333; 
} 
 
 div {
 position：fixed; 
 width：500px; 
 height：500px; 
 top：50px; 
 left：50px; 
 mix-blend-mode：darken; 
 background-image：url（http://lorempixel.com/500/500/）; 
} 
 div :: after {
 content：; 
身高：100％; 
宽度：100％; 
 background-color：yellow; 
 mix-blend-mode：darken; 
位置：绝对; 
 opacity：1; 
剩下：0; 
 top：0; 
} 
  

或者：

 < div>< img src =http://lorempixel.com/500/500/>< / div> 
  

在div css中没有'background-image'。

I've been trying to use the mix-blend-mode on a page that has contains instances of css opacity transitions. What appears to be happening is that the div containing the mix-blend-mode displays as it would without the blend mode during the transition, or rather, while the animation is in progress. I've only found it to be an issue in Chrome.

In my example, while the div is transforming the blend-mode displays correctly over the image but not over the page background. Once the transition is complete it goes back to display as it should. In other words the blended div appears as solid yellow on the black background while the animation is ongoing but since it is set to darken it should be invisible over the black background. Once the animation is finished it appears as it should. It appears normal over the image.

I've tried this is Firefox and Safari and there seems to be no issue.

Pen: http://codepen.io/anon/pen/QGGVOX

Edit - I've found another instance where this occurring that doesn't involve any animation. Weirdly it happens when the position of one div is set to fixed while the other is absolute, see here: http://codepen.io/anon/pen/wooRME If the position of the div .image is changed to absolute then the blend-mode appears normal.

body {
background: #000;
}

.blend {
  height: 650px;
  width: 50%;
  background-color: yellow;
  mix-blend-mode: darken;
  position: absolute;
  opacity: 1;
  left: 0;
  top: 0px;
  z-index: 100;
}

img {
  position: relative;
  z-index: 0;
}

解决方案

So, I think I figured the problem. During the animation, it seems like the body doesn't count as an element, thus making the yellow appear at 1 opacity. I tested with other blend mode and it always appears yellow. (when set to 'difference the expected result would be white instead of yellow)

So the fix? just add a div with 100% sizes and a black background! Then, the yellow has something to blend in and doesn't show up.

Here's the code that worked in your pen:

html - added the bg div:

<div class="bg"></div>
<div class="blend"></div>
<img src="http://lorempixel.com/500/500/">

it's css:

.bg{
  background: #000;
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
}
body {
  background: #000;
  width: 100%;
  height: 100%;
  margin: 0;
}

I also changed the body to fill the window so the margin weren't yellow too. Alternatively, the blend div could be sized in function of the body.

tagging @chrscblls since they wanted to know if you found anything.

---

EDIT :

For the other codepen the problem wasn't the same tho. They were trying to darken an image and a yellow rectangle onto a gray background.

If they didn't want the yellow to show on their gray background, the solution was simply to put the image inside a div and use ::after to blend in a color. Or even just make an empty div, give it the image as background and use the ::after.

this:

<div/>

with:

body {
  background: #333;
}

div{
  position:fixed;
  width: 500px;
  height: 500px;
  top:50px;
  left: 50px;
  mix-blend-mode: darken;
  background-image: url("http://lorempixel.com/500/500/");
}
div::after {
  content: "";
  height: 100%;
  width: 100%;
  background-color: yellow;
  mix-blend-mode: darken;
  position:absolute;
  opacity: 1;
  left: 0;
  top: 0;
}

or this:

<div><img src="http://lorempixel.com/500/500/"></div>

without the 'background-image' in the div css.

这篇关于Chrome中的混合混合模式问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！