[solved]Transparent PIXI renderer on top of html image causing white border

[ZYandu]

I'm getting a side effect from having PIXI sprites over the top of an html image background. It seems like a white border or artifacts are created when transitioning between displaying the sprite and the image background. 

The z-index layout in html for the image and pixi: 

<!-- Background Html image -->
  <div
    className={css`
      position: absolute;
      z-index: 0;
      width: ${window.innerWidth}px;
      height: ${window.innerHeight}px;
      overflow: hidden;
    `}
  >
    <img src={backgroundImg} />
  </div>
<!-- PIXI Stage -->
  <div
    className={css`
      position: absolute;
      z-index: 2;
      transform: scale(${Math.min(window.innerWidth / 1920, window.innerHeight / 400)});
      transform-origin: top left;
      overflow: hidden;
      width: ${window.innerWidth}px;
      height: 600px;
    `}
    ref={element => {
      props.updatePixi(element);
    }}
  />

Renderer settings:

const renderer = useRef(
   new PIXI.autoDetectRenderer({
        width: highwayWidth.current,
        height: highwayHeight.current,
        preserveDrawingBuffer: true,
        transparent: true,
        backgroundColor: 0xffffff,
        antialias: false,
   })
);

Removing sprites from the stage reveals more of the background, but adds white border artifacts to the other sprites now too.

https://imgur.com/a/wCuLlbr

Removing the background added white artifacts to the next sprites transitioning to the html image:

https://imgur.com/a/1xOiAyc

Any advice on getting rid of this? Thanks for any help! ?

 

[ivan.popelyshev]

It looks like premultiplied alpha issue, but im not sure. Please make a demo.

[ZYandu]

Sorry, I was out of town for the weekend ^.^ Hopefully this pixi playground works for you: https://www.pixiplayground.com/#/edit/DLhN7lSrT6uHC3uZAN3eJ

[ZYandu]

I believe all that is happening is it adds the backgroundColor to the border of the sprite. Does that mean I should just not have a backgroundColor when using a background html image?

[ivan.popelyshev]

> I believe all that is happening is it adds the backgroundColor to the border of the sprite. Does that mean I should just not have a backgroundColor when using a background html image?

That's true, because alpha is premultiplied and background (R,G,B,0) actually is ADDED to it.

[ZYandu]

Makes sense, that solves it for me! Thank you! ?