From e6ec53e92559e63c7690c2646d688b34ba77b3bd Mon Sep 17 00:00:00 2001
From: Alquen Sarmiento <sarmientoalquen@gmail.com>
Date: Thu, 19 Mar 2026 10:25:34 +0800
Subject: [PATCH 1/2] fix: transform on <g> instead of <svg> as a safari fix

---
 src/block-components/image/get-shape-css.js | 27 +++++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/block-components/image/get-shape-css.js b/src/block-components/image/get-shape-css.js
index 5bdbc56708..3113f7b146 100644
--- a/src/block-components/image/get-shape-css.js
+++ b/src/block-components/image/get-shape-css.js
@@ -30,9 +30,32 @@ export const getShapeCSS = ( shape, shapeFlipX, shapeFlipY, shapeStretch ) => {
 	const MaskImage = getShapeSVG( shape )
 	const MaskComp = <MaskImage
 		preserveAspectRatio={ ! [ '', 'square' ].includes( shape ) && shapeStretch ? 'none' : undefined }
-		transform={ ! shapeFlipX && ! shapeFlipY ? undefined : `scale(${ shapeFlipX ? -1 : 1 },${ shapeFlipY ? -1 : 1 })` }
 	/>
-	const maskString = btoa( svgRenderToString( MaskComp ) )
 
+	let svgString = svgRenderToString( MaskComp )
+
+	// Safari fix: instead of transform on <svg>, wrap contents in a <g> with transform
+	if ( shapeFlipX || shapeFlipY ) {
+		const scaleX = shapeFlipX ? -1 : 1
+		const scaleY = shapeFlipY ? -1 : 1
+
+		// Extract viewBox to compute translate offset
+		const viewBoxMatch = svgString.match( /viewBox="([^"]+)"/ )
+		const [ _minX, _minY, width, height ] = viewBoxMatch
+			? viewBoxMatch[ 1 ].split( ' ' ).map( Number )
+			: [ 0, 0, 100, 100 ]
+
+		const translateX = shapeFlipX ? width : 0
+		const translateY = shapeFlipY ? height : 0
+
+		// SVG transform are applied right to left
+		// Scale first (flip) and translate (reposition to view)
+		svgString = svgString.replace(
+			/(<svg[^>]*>)([\s\S]*)(<\/svg>)/,
+			`$1<g transform="translate(${ translateX },${ translateY }) scale(${ scaleX },${ scaleY })">$2</g>$3`
+		)
+	}
+
+	const maskString = btoa( svgString )
 	return `url('data:image/svg+xml;base64,${ maskString }')`
 }

From 5bbb11612f0d1106f2965e26b360fec45511dd80 Mon Sep 17 00:00:00 2001
From: Alquen Sarmiento <sarmientoalquen@gmail.com>
Date: Thu, 19 Mar 2026 11:36:44 +0800
Subject: [PATCH 2/2] fix: handle edge cases

---
 src/block-components/image/get-shape-css.js | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/block-components/image/get-shape-css.js b/src/block-components/image/get-shape-css.js
index 3113f7b146..c51ff17d56 100644
--- a/src/block-components/image/get-shape-css.js
+++ b/src/block-components/image/get-shape-css.js
@@ -40,13 +40,12 @@ export const getShapeCSS = ( shape, shapeFlipX, shapeFlipY, shapeStretch ) => {
 		const scaleY = shapeFlipY ? -1 : 1
 
 		// Extract viewBox to compute translate offset
-		const viewBoxMatch = svgString.match( /viewBox="([^"]+)"/ )
-		const [ _minX, _minY, width, height ] = viewBoxMatch
-			? viewBoxMatch[ 1 ].split( ' ' ).map( Number )
-			: [ 0, 0, 100, 100 ]
+		const viewBoxMatch = svgString.match( /viewBox=["']([^"']+)["']/ )
+		const [ minX, minY, width, height ] = viewBoxMatch
+			? viewBoxMatch[ 1 ].trim().split( /[\s,]+/ ).map( Number ) : [ 0, 0, 100, 100 ]
 
-		const translateX = shapeFlipX ? width : 0
-		const translateY = shapeFlipY ? height : 0
+		const translateX = shapeFlipX ? width + ( 2 * minX ) : 0
+		const translateY = shapeFlipY ? height + ( 2 * minY ) : 0
 
 		// SVG transform are applied right to left
 		// Scale first (flip) and translate (reposition to view)