Bug with CSS3DObject and mix-blend-mode CSS

I think this might be related to the order in which the browser applies the operations.

  1. Browser rasterizes the video into bitmap
  2. Browser applies CCS3D transformations, scaling the bitmap up
  3. Browser applies mix-blend-mode.

I’ve run into a similar issue with fonts. This might be because your <div> is small in pixel values. The browser has to convert it to bitmap format to apply the mix-blend-mode, and if it’s something small, like 64px x 32 px, then that’s all the pixels you’ll get.

I ended up coming up with the solution of using a <div> that was 10x larger than necessary (so in my example it’d be 640 x 320), then scaling the CSS3D Scene down 10x with cssScene.scale.set(0.1, 0.1, 0.1); That way when the browser performs the rasterization, you’ll have all those extra pixels to work with.

I hope this solution works for you as well. I wrote more about it in this thread: