Today I am writing a small CSS Demo, a 3d ball rotation animation, CSS 3D, will not use the following attributes:

{
    transform-style: preserve-3d;
    perspective: 1000;
    transform: translate3d(a); }Copy the code

CodePen Demo-3D ball: CodePen demo-3D ball

Well, when I got to this point, I thought of the CSS blend mode mix-blend-mode and wondered if I could take it to the next level or create some other spark.

Mix-blend-mode: Commonly referred to as blend mode, blend multiple layers in blend mode to get a new effect. Mix-blend-mode describes how the element’s content should be blended with the element’s immediate parent’s content and the element’s background.

Background-blending-mode is a blend mode that can be used in a variety of ways

CSS 3 d coordinatemix-blend-mode

However, after adding a blend mode to the element, something magical happened and the 3D effect disappeared.

Add this to the CSS element code for each spot of light:

{
    mix-blend-mode: lighten;
}
Copy the code

The effect has changed from CSS 3D to 2D.

Here’s the weird thing: the expected mixing didn’t happen, but instead the 3D failed. I think, perhaps related to the kernel, the above effect was tested in Chrome 65.0.3325.181.

Is it related to the browser kernel?

With that in mind, I tested a few other kernels:

  • Firefox 64.0 – Even weirder this time, the entire pattern is no longer rendered
  • Safari 12.0.2 — Render normal

Safari can be displayed normally, only briefly, and should be kernel dependent. There are probably a lot of people who have the same problem, so with that in mind, Google it.

StackOverflow — mix-blend-mode is broken by 3D doubling on page

Later, on the Chromium Bug submission website, I found a bug list in 2015, which is also a question about this problem:

BUG -CSS mix-blend-mode turns off CSS perspective.

I finally found a possible answer at the bottom of the bug list:

When we have mix-blend-mode, the closest ancestor that creates stacking context will isolate blending. We create a render surface at the root of this isolated group and because render surfaces don’t support preserve-3d(because they render into separate FBO), we see a flattened result.

ajuma@ suggested that this bug maybe much easier to fix after Slimming paint v2 if we can somehow disentangle transforms from layers.

Translated, it means something like: When we use CSS blend mode, the stack context re-creates a separate render plane at the root node of the blended element, but unfortunately this render plane does not support preserve-3D (because they are rendered in a separate FBO). So we see a 2D flat effect.

Validation Layer borders

I’ll use chrome to verify and turn on the developer tool Rendering -> Layer Borders:

The yellow represents GraphicsLayer layers for CSS rendering, and the blue grid represents tiles, which you can think of as units of layers (not layers) that the Chrome kernel can upload to the GPU as part of a larger layer for rendering acceleration.

  • In normal 3D mode, turn on the Layer Borders effect:

  • addedmix-blend-modeWith the Layer Borders effect enabled in 3D mode:

You can see that in mix-Blend-mode 3D, there is indeed a layer of blue tiles in addition to the spherical elements. This was the separate render plane mentioned above, and because this render plane did not support Preserve-3D, we ended up with a 2D graphic.

Filters can also cause CSS 3D to fail

Have you finished? No. Oh, no. I can’t stand that.

If mix-blending-mode failed 3D because it generated a separate render plane, are there other elements that could have caused the same result?

Confused, I removed mix-blending-mode and added a filter to the 3d element:

{
-    mix-blend-mode: lighten;
+    filter: blur(1px);
}
Copy the code

Sure enough, the same problem appeared, and 3D failed:

To summarize

Well. A preliminary conclusion should be drawn that all of these will cause the internal CSS 3D to fail by generating a separate render plane at the time of rendering and containing preserve-3D attributes.

There are several properties that I have found that will cause CSS 3D to fail:

  • mix-blend-mode
  • background-blend-mode
  • filter

Other problems

What is the impact of this bug

Well, generally speaking, very few people use blend mode or filter with CSS 3D, these two properties are more icing on the cake, so most of the time, you don’t have to use them, so it’s not a big deal.

What is the FBO above?

I am not 100% sure what the FBO is exactly. I guess it should be a Frame Buffer Object, which exists in video memory. The frame cache is a collection of two-dimensional arrays and storage areas used by OpenGL: color cache, depth cache, template cache, and accumulative cache.

All kinds of 3D scenes were now rendered on the screen in an FBO, which could be understood as an off-line image to speed up rendering.

When the Bug will be fixed

On the Chromium Bugs site, the above bug is incorporated into issue 575099 and the final status is Untriaged, meaning not yet assigned priority, meaning waiting for someone to decide who should claim and fix that particular bug. So there may be no immediate solution.

The last

Thank you for your patience. More interesting CSS technology articles are summarized in my Github — iCSS, constantly updated, welcome to click on the star subscription favorites.

Well, the end of this article, I hope to help you 🙂

If there are any questions or suggestions, you can exchange more original articles, writing is limited, talent and learning is shallow, if there is something wrong in the article, hope to inform.