Compatibility - iOS17 Safari - aspectRatio parameter not working

[walty8]

Describe the bug A clear and concise description of what the bug is.

• in iOS17, the parameter of aspectRatio does not work any more. It works fine in iOS 16.

Describe the browser:

• OS: iOS 17.0.2
• Browser: safari
• Version: 17.0.2

Screenshots I have created a basic demo site for this issue:

https://quick-demo.com/qrcode/index.html

the configuration is:

    var config = {
    fps: 10,
    qrbox: 250,
    aspectRatio: 1.777778
  }

for ios 16, it looks like this

and for ios 17, it looks like this (pls note that there is blank area at the bottom):

[ROBERT-MCDOWELL]

it's an OS/browser issue, NOT an html5-qrcode issue. so please ask your question to the IOS or browser developers and close this issue.

[luenib]

Hi, @walty8

It happened to me, too, after upgrading to iOS 17.1.1. This is how I "solved" the issue:

        // The reader
        #qr-reader {
            height: 160px; /* I guess it can be anything as long as the barcode fits */
            overflow: hidden;
            position: relative;
        }

        video {
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            margin: auto;
            transform: translateY(-50%);
        }

Then, set the height of qrbox as follows:

        qrbox: function (viewfinderWidth, viewfinderHeight) {
            let boxSize = Math.floor(
                0.85 * Math.min(viewfinderWidth, viewfinderHeight) // 85% of its container
            )
            return {
                width: boxSize,
                height: boxSize * 1.4 //Just to make the box look proportional to its container. It depends of the height of #qr-reader
            };
        },

I'm not proud of this half-baked, silly, solution, but it seems to work now.

Hope it helps.