Monday, December 15, 2025
spot_img

iOS 26 Net Browser Builds, Random Lacking Rendering – Cocos Creator


Hiya, :grinning_face:

I’m encountering a rendering challenge in Cocos Creator 3.8.6 and three.8.7 that solely happens on iOS 26 Net browsers.

Challenge Surroundings

  • 2D mission
  • Backbone character animations (e.g., eye slots)
  • BMFont (PNG-based)
  • Net construct
  • Solely default built-in shaders used
  • No alpha masking or stencil operations used

Signs

  • Small Backbone slots (e.g., eyes) randomly don’t seem
    • Some characters don’t show them initially
    • Regenerating the character restores the lacking slots
  • Each Label and RichText use BMFont, however generally the final Label or RichText to be rendered fails to show randomly.
  • Works effective on Android and iOS 16 / 18 net browsers
  • Solely happens on iOS 26 Net browsers (not restricted to Safari)
  • Unrelated to scene transitions or useful resource launch
  • Happens randomly when DpCall is round 30–80
  • Probability will increase because the variety of characters on display grows (examined with 16 characters)

Makes an attempt to Repair

  • Disabled Atlas Trim/Rotation choice
  • Disabled Backbone Premultiplied Alpha
  • Examined on newest iOS 26 net browsers
  • Upgraded Cocos from 3.8.6 → 3.8.7
  • Compelled WebGL1 construct

Consequence: Regardless of all makes an attempt, the difficulty persists solely on iOS 26 WebGL1 browsers, the place particular slots or characters fail to render.

Has anybody else skilled the identical challenge when testing Net builds on iOS 26?

Listed below are two latest makes an attempt I made to cope with the rendering challenge:

1. Calling capabilities like markForUpdateRenderData after setting a node energetic

public static refreshAll(node: Node, withDelay: boolean = true) {
    const doRefresh = () => {
      // ----- Sprite -----
      node.getComponents(Sprite).forEach((c) => {
        c.markForUpdateRenderData();
        c.colour = c.colour; // Safari soiled trick
      });

      // ----- Label -----
      node.getComponents(Label).forEach((c) => {
        c.updateRenderData(true);
        c.markForUpdateRenderData();
        c.colour = c.colour; // Safari soiled trick
      });

      // ----- RichText -----
      node.getComponents(RichText).forEach((wealthy) => {
        // Reassign the identical worth to set off soiled flag
        wealthy.string = wealthy.string;

        // Pressure replace baby labels inside RichText
        wealthy.node.youngsters.forEach((baby) => {
          const lbl = baby.getComponent(Label);
          if (lbl) {
            lbl.updateRenderData(true);
            lbl.colour = lbl.colour; // Safari soiled trick
          }
        });
      });

      // ----- Backbone -----
      const spines = node.getComponents("sp.Skeleton") as any[];
      spines.forEach((c: any) => {
        if (c.markForUpdateRenderData) {
          c.markForUpdateRenderData();
        }
        if (c.invalidAnimationCache) {
          c.invalidAnimationCache();
        }
        c.node.setScale(c.node.scale.x, c.node.scale.y); // Safari soiled trick
      });

      // ----- Node scale soiled trick -----
      node.setScale(node.scale.x, node.scale.y);

      // ----- Recursively refresh youngsters -----
      node.youngsters.forEach((baby) => this.refreshAll(baby, false));
    };

    if (withDelay) {
      setTimeout(doRefresh, 0); // Run on the subsequent body
    } else {
      doRefresh();
    }
}

2. Forcing a draw by calling gl.flush() after Director.EVENT_AFTER_DRAW

const canvas = doc.querySelector("canvas") as HTMLCanvasElement; 
const gl = canvas.getContext("webgl2") || canvas.getContext("webgl");
if (gl) gl.flush();

In each circumstances, there was some impact (beforehand invisible parts began displaying up), however when a number of objects didn’t render, these tips weren’t enough to repair the difficulty fully.

Provided that iOS 26 initially struggled with overheating issues, I think Apple might need launched some inner optimizations or adjustments in later patches, which could possibly be the underlying reason behind this conduct.

When utilizing the Additive BlendMode for Backbone animations on iOS 26, sure components don’t render accurately.
This challenge appears separate from the UI font not rendering drawback, however the signs seem comparable, so I needed to report it right here.

Utilizing a system font or a dynamic font (like a TTF) as an alternative of a BMFont can repair the difficulty the place textual content shouldn’t be seen.

I encountered the identical drawback. Did you discover a answer?

@nizakifx
I haven’t discovered an actual answer but. Within the recreation, I’m making an attempt to maintain the draw calls beneath 30, and for circumstances occurring within the UI, I’m avoiding the difficulty through the use of System Fonts as an alternative of BMFont.

We additionally encountered the entire drawback, which troubled us for 2 months

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisement -spot_img

Latest Articles