fix(domRenderer): fixes for PS4

src/core/dom-renderer/domRenderer.ts

@@ -35,7 +35,7 @@
 } from './domRendererUtils.js';
 
 // Feature detection for legacy brousers
 const _styleRef: any =
   typeof document !== 'undefined' ? document.documentElement?.style || {} : {};
 
 const supportsObjectFit: boolean = 'objectFit' in _styleRef;
@@ -109,7 +109,7 @@
     for (const prop in task.propsEnd) {
       const start = task.propsStart[prop]!;
       const end = task.propsEnd[prop]!;
       (task.node.props as any)[prop] = interpolateProp(prop, start, end, t);
     }
 
     updateNodeStyles(task.node);
@@ -134,7 +134,7 @@
 
   constructor(
     public node: DOMNode,
     props: Partial<lng.INodeAnimateProps<any>>,
     rawSettings: Partial<lng.AnimationSettings>,
   ) {
     this.settings = {
@@ -152,7 +152,7 @@
 
     for (const [prop, value] of Object.entries(props)) {
       if (value != null && typeof value === 'number') {
         this.propsStart[prop] = (node.props as any)[prop];
         this.propsEnd[prop] = value;
       }
     }
@@ -214,7 +214,7 @@
 
 function animate(
   this: DOMNode,
   props: Partial<lng.INodeAnimateProps<any>>,
   settings: Partial<lng.AnimationSettings>,
 ): lng.IAnimationController {
   return new AnimationController(this, props, settings);
@@ -800,10 +800,14 @@
       let bgLayerStyle =
         'position: absolute; top:0; left:0; right:0; bottom:0; z-index: -1; pointer-events: none;';
       // overflow:hidden clips the transformed imgEl to prevent sprite bleed-through
-      // for non-tinted subtextures. NOT applied when hasDivBgTint because
-      // overflow:hidden + CSS mask-image causes a 1px white border artifact on WebKit.
+      // for non-tinted subtextures, and to enforce borderRadius clipping on the
+      // <img> itself: older WebKit engines (e.g. PS4) don't clip a replaced
+      // element's (img) own content via border-radius, only its background/border,
+      // so relying on radiusStyle alone leaves the image square on that platform.
+      // NOT applied when hasDivBgTint because overflow:hidden + CSS mask-image
+      // causes a 1px white border artifact on WebKit.
       // Tinted nodes use mask-image for visual clipping, so overflow:hidden is unnecessary.
-      if (srcPos !== null && !hasDivBgTint) {
+      if ((srcPos !== null || radiusStyle !== '') && !hasDivBgTint) {
         bgLayerStyle += 'overflow: hidden;';
       }
       if (bgStyle) {
@@ -822,7 +826,6 @@
         if (!node.imgEl) {
           node.imgEl = document.createElement('img');
           node.imgEl.alt = '';
-          node.imgEl.crossOrigin = 'anonymous';
           node.imgEl.setAttribute('aria-hidden', 'true');
           node.imgEl.setAttribute('loading', 'lazy');
           node.imgEl.removeAttribute('src');
@@ -944,7 +947,6 @@
       if (!node.imgEl) {
         node.imgEl = document.createElement('img');
         node.imgEl.alt = '';
-        node.imgEl.crossOrigin = 'anonymous';
         node.imgEl.setAttribute('aria-hidden', 'true');
         node.imgEl.setAttribute('loading', 'lazy');
         node.imgEl.removeAttribute('src');
@@ -1472,6 +1474,13 @@
     this.hideMaskedBackgroundLayer();
     this.imgEl.style.display = '';
     this.imgEl.dataset.pendingSrc = pendingSrc;
+    // crossOrigin + data: URI fails to load on old WebKit engines (e.g. PS4 WebMAF) —
+    // only request CORS for real network sources, never for inlined base64 images.
+    if (pendingSrc.startsWith('data:')) {
+      this.imgEl.removeAttribute('crossorigin');
+    } else {
+      this.imgEl.crossOrigin = 'anonymous';
+    }
     this.imgEl.src = pendingSrc;
     this.imgEl.dataset.rawSrc = pendingSrc;
     this.imgEl.dataset.pendingSrc = '';

src/core/dom-renderer/domRendererUtils.ts

@@ -120,7 +120,6 @@ export function applySubTextureScaling(
   if (!regionW || !regionH) return;
   const targetW = node.props.w || regionW;
   const targetH = node.props.h || regionH;
-  if (targetW === regionW && targetH === regionH) return;
   const naturalW = img.naturalWidth || regionW;
   const naturalH = img.naturalHeight || regionH;
   const scaleX = targetW / regionW;