Thursday, December 18, 2025
spot_img

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


Hi there, :grinning_face:

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

Mission Setting

  • 2D challenge
  • 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 wonderful 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
  • Chance will increase because the variety of characters on display screen grows (examined with 16 characters)

Makes an attempt to Repair

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

End result: 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 concern when testing Net builds on iOS 26?

Listed here are two current makes an attempt I made to take care of the rendering concern:

1. Calling capabilities like markForUpdateRenderData after setting a node lively

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

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

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

        // Power replace youngster labels inside RichText
        wealthy.node.youngsters.forEach((youngster) => {
          const lbl = youngster.getComponent(Label);
          if (lbl) {
            lbl.updateRenderData(true);
            lbl.shade = lbl.shade; // 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((youngster) => this.refreshAll(youngster, false));
    };

    if (withDelay) {
      setTimeout(doRefresh, 0); // Run on the following 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 instances, there was some impact (beforehand invisible components began exhibiting up), however when a number of objects didn’t render, these tips weren’t ample to repair the difficulty fully.

Provided that iOS 26 initially struggled with overheating issues, I believe Apple may need launched some inside optimizations or modifications in later patches, which might be the underlying reason for this conduct.

When utilizing the Additive BlendMode for Backbone animations on iOS 26, sure elements don’t render appropriately.
This concern appears separate from the UI font not rendering downside, 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 isn’t seen.

I encountered the identical downside. Did you discover a resolution?

@nizakifx
I haven’t discovered an actual resolution but. Within the recreation, I’m attempting to maintain the draw calls below 30, and for instances 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 downside, 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