Whats up, 
I’m encountering a rendering challenge in Cocos Creator 3.8.6 and three.8.7 that solely happens on iOS 26 Net browsers.
Venture Atmosphere
- 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 typically 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
- 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 choice
- Disabled Backbone Premultiplied Alpha
- Examined on newest iOS 26 net browsers
- Upgraded Cocos from 3.8.6 → 3.8.7
- Compelled WebGL1 construct
Outcome: Regardless of all makes an attempt, the problem 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 current makes an attempt I made to cope with the rendering challenge:
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.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;
// Power replace baby labels inside RichText
wealthy.node.kids.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 kids -----
node.kids.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 instances, there was some impact (beforehand invisible parts began exhibiting up), however when a number of objects did not render, these tips weren’t adequate to repair the problem utterly.
Provided that iOS 26 initially struggled with overheating issues, I think Apple might need launched some inner optimizations or modifications in later patches, which could possibly be the underlying reason behind this habits.
When utilizing the Additive BlendMode for Backbone animations on iOS 26, sure elements don’t render accurately.
This challenge appears separate from the UI font not rendering drawback, however the signs seem comparable, so I wished to report it right here.
