Ratio issue for image

[ronangaillard]

For some images when using the SVG component the image has the wrong ratio.

On Chrome there is no issue :

But same page on firefox has ratio issue :

I belive it is linked to this issue : #167

[zpao]

Can you reproduce this in a way that can be shared? Is it a specific embedded image? I haven't heard reports of rendering being different between browsers but would like to investigate.

[ronangaillard]

Here is a playground link : https://playcode.io/2281949

I can reproduce the bug when I browse the playground on firefox.

FYI I fixed the issue in my app by applying this patch :

diff --git a/node_modules/qrcode.react/lib/esm/index.js b/node_modules/qrcode.react/lib/esm/index.js
index aa947a7..5759e7c 100644
--- a/node_modules/qrcode.react/lib/esm/index.js
+++ b/node_modules/qrcode.react/lib/esm/index.js
@@ -1100,7 +1100,6 @@ var QRCodeSVG = React.forwardRef(
           width: calculatedImageSettings.w,
           x: calculatedImageSettings.x + margin,
           y: calculatedImageSettings.y + margin,
-          preserveAspectRatio: "none",
           opacity: calculatedImageSettings.opacity,
           crossOrigin: calculatedImageSettings.crossOrigin
         }
diff --git a/node_modules/qrcode.react/lib/index.js b/node_modules/qrcode.react/lib/index.js
index a6c4347..ad1c0ef 100644
--- a/node_modules/qrcode.react/lib/index.js
+++ b/node_modules/qrcode.react/lib/index.js
@@ -1132,7 +1132,6 @@ var QRCodeSVG = import_react.default.forwardRef(
           width: calculatedImageSettings.w,
           x: calculatedImageSettings.x + margin,
           y: calculatedImageSettings.y + margin,
-          preserveAspectRatio: "none",
           opacity: calculatedImageSettings.opacity,
           crossOrigin: calculatedImageSettings.crossOrigin
         }

[zpao]

Thanks for that! It's really helpful to be able to test. I was assuming you had an SVG in the embedded image :) Now I wonder which engine is "correct" here… Gecko (Firefox) is the odd one out with Blink (Chrome) and Webkit (Safari) both rendering this fine.

I'll need to play with this a bit and ensure just removing that line works across SVG and raster images. The spec isn't entirely clear to me and svgs and data URIs add another variable to the mix. I wonder if perhaps Firefox is just in the wrong.

But will play around and get back here soon!