spots appear when rendering

[actionmoon]

Version

• Phaser Version:3.52.0
• Operating system: Android 10
• Browser: unknow

Description

when rendering pictures and text at the same time, moving pictures it will leave spots. This only appears on some Android devices.

Example Test Code

Additional Information

[photonstorm]

Thanks for opening this issue. As much as we'd love to help you, we need a fully working code sample to do so that accurately reproduces this issue. Please provide one and then we'll re-open this issue and look at resolving it for you if possible.

[actionmoon]

Sorry, I can't provide the code example to reproduce, it will only appear on the specified device

I can only provide information about the render queue when this problem occurred。

type:Sprite depth: -2 texture key: __DEFAULT
type:Container depth: 0 childrenCount: 1
	type:Graphics depth: 0
type:Container depth: 0 childrenCount: 5
        type:Sprite depth: 0 texture key: Background/绝世龙门.jpg
        type:Sprite depth: 1 texture key: Background/大会议厅_540.jpg
        type:Sprite depth: 10 texture key: Portrait/西装男.png
        type:Sprite depth: 11 texture key: Portrait/气质男_540.png
        type:Sprite depth: 14 texture key: Portrait/棕色大衣青年_540.png
type:Container depth: 132 childrenCount: 2
        type:Sprite depth: 0 texture key: ___dialogue_containerAside___
	type:rexBBCodeText depth: 0
type:Container depth: 132 childrenCount: 0
type:Container depth: 201 childrenCount: 5
	type:Graphics depth: 0
        type:Text depth: 0 text: 虎婿
        type:Text depth: 0 text: 剧情-2
        type:Sprite depth: 0 texture key: ___buttonnavigation__
        type:Sprite depth: 0 texture key: ___buttonmore___

[actionmoon]

I guess the reason for this issue is that some visible objects exceed the display area ，it Just normal rendering effect include ContainerWebGLRenderer / TextWebGLRenderer / SpriteWebGLRenderer ，No post-processing effects, no normals, no stencil, no masks ！

[actionmoon]

@photonstorm It is especially easy to appear when the rendering order of text and pictures cross。The following example can reproduce this problem on the specified Android device。I guess the reason for this problem is the rendering of the text. If you have any good suggestions, or the principle of rendering this problem, you can provide it to me

export default class MainScene extends Phaser.Scene {
  contens: string[]
  style: {}

  constructor() {
    super({ key: 'MainScene' })
    this.contens = [
      '[b]这是认识小姐姐的第二天，小姐姐早上好～[/b]',
      '你好～',
      '小姐姐的表情包都好可爱～',
      '小姐姐平时喜欢什么呀？',
      '小鱼干！',
      '噗',
      '真的是猫一样的少女呢～',
      '乔辞一边想象着对面漂亮小姐姐温柔撸猫的样子，一边逛网店，手一抖，就买下了十袋小鱼干零食包',
      '喜欢吗？',
      '喵呜～',
      '嗯嗯嗯嗯！',
      '买给你的，等国庆那天我给你',
      '一旁的几个“室友”在那儿瞅着顾白对着手机，笑得像个傻子',
      '怎么，你说的长期饭票真的答应你了？？',
      '本大喵亲自出马，还用说？',
    ]
    this.style = {
      fontFamily: 'PingFang SC',
      fontSize: 54,
      color: '#000000',
      align: 'center',
      wordWrap: {
        width: 1000,
        useAdvancedWrap: true,
      },
    }
  }

  create() {
    const W = this.cameras.main.width

    let y = 20
    for (let i = 0; i < this.contens.length; i++) {
      const text = this.add.text(0, 0, this.contens[i], this.style)
      const bounds = text.getBounds()
      const _x = W / 2
      const _y = y + bounds.height / 2 + 40

      text.setOrigin(0.5, 0.5)
      text.setPosition(_x, _y)
      text.setDepth(1)

      const sp = this.add.sprite(_x, _y, '__WHITE')
      sp.setDisplaySize(bounds.width + 48, bounds.height + 48)
      sp.setDepth(0)

      this.add.existing(sp)
      this.add.existing(text)

      y += bounds.height + 80
    }
  }
}
![1](https://user-images.githubusercontent.com/6701451/119493678-05cb8c00-bd93-11eb-9d7d-7edbec698949.png)