ng-qrcode icon indicating copy to clipboard operation
ng-qrcode copied to clipboard

Published 20 hours ago • verified publisher icon mnahkies

QR-Code not displayed in Google Chrome when center image is defined

Open j-ruch opened this issue 2 years ago • 5 comments

Description:

We are using the ng-qrcode library ^7.0.0 in our Angular project to display qr-codes for a specific URL. This issues was found using the Google Chrome browser. We tested different browsers on our end. You can see the browsers and versions below. The only Browser that had such problems was Google Chrome. All other browsers were working as expected with a center image in the qr-code.

Issue Reproduction:

When we first fetch the data and create a qr-code url the qr-code is properly displayed in our UI.

image

When we send a second request, fetch new data and re-create the qr-code url, the qr-code is not displayed anymore.

image

A workaround for this issue was to simply remove the center image from the code and everything was running fine again in Google Chrome. We assume there might be an issue within the library.

<!--<qr-code [value]="qrCodeUrl" centerImageSrc="assets/img/logo-small-white-background.svg"></qr-code>--> <qr-code [value]="qrCodeUrl"></qr-code>

Versions:

We tested this issue in

  • Google Chrome (v. 105.0.5195.127)
  • Firefox (v. 105.0.1)
  • Opera GX (v. 90.0.4480.117)
  • MS Edge (v. 105.0.1343.50).
  • ng-qrcode (v. ^7.0.0)

j-ruch avatar Sep 25 '22 11:09 j-ruch

I attempted to reproduce this today, but only succeeded in reproducing a similar but different issue where the QR Code still rendered correctly but the center image disappeared.

I've put a fix up (#71) for that which will be released in v8.0.1

If you could provide a stackblitz or similar that reproduces the issue for you I'd be happy to investigate further

mnahkies avatar Dec 03 '22 15:12 mnahkies

I'm facing this issue today as well, but only on Android. Windows Chrome Version 110.0.5481.97 is fine; Android 110.0.5481.65 not.

rala72 avatar Feb 14 '23 22:02 rala72

@rala72 which version of ng-qrcode are you using?

Could you provide a https://stackblitz.com/ that reproduces it for you?

mnahkies avatar Feb 15 '23 07:02 mnahkies

I'm sorry, I got confused with the qr code libraries and it looks like I'm using angularx-qrcode. Sorry again for the noise.

rala72 avatar Feb 15 '23 07:02 rala72

I observe the same problem only on a specific android phone, Samsung A33, which is a 2022 phone. All other androids and iPhones, some quite older, show the centerImageSrc image normally.

I am not sure how to create a stackblitz with me exact app settings, I simply copy pasted the boilerplate code from here and changed the value and the centerImageSrc values.

What happens is that when I navigate to the QR page, the QR shows for a split second, then the centerImage appears and the QR disappears behind it.

konstantinosftw avatar Sep 04 '23 14:09 konstantinosftw