Bug in WireGuard QRCode with DarkMode

Technical Support for Routers
1

Hi Folks,

my brother just bought multiple Gl-Inet Routers (Flint, Beryl AX, Brumme2) and was about to setup Wireguard. Here he was getting a reproducible bug.

If you are generating a WireGuard config at the flint web frondend and your browser is in dark mode, another device is not able to scan the code.
If you are switching to light mode, everything works well.

qrcode_dark
qrcode_dark872×963 39.5 KB

qrcode_light
qrcode_light897×965 39.1 KB

The reason it the missing ‘quiet zone’. See 5. at the following picture: QR_Code areas

Source: QR code - Wikipedia

In my experience the quiet zone should have roundabout 2 modulus (the width of one line in a QR code is called modulus) and not less than 4 px.
I think this will be the same for other devices than the Flint, as well.

2

What is your phone model? We have tested with iPhone and some Android phones and they all scan fine.

To solve this suspicion, you can try manually adding a border to the QR code to see if it will scan:

  1. Press Ctrl + Shift + I
  2. Select the element tab
  3. Press Ctrl + Shift + C and click on the QR code image
  4. Add border: 4px solid white; in the style

image
image796×91 6.78 KB

1 Like
3

Thanks for the hint with the manual border. But my mobile browser got no console.

The behavior does not only depends on the Phone/Cam, it also depends on the scanning app. If the app is able to read inverse codes (I know some industrial scanners), it is most likely to read also without quiet zone. This is not standard!
Since there is a lot of malware around in the Play Store I recommend all users to use the standard apps as possible. Since Android 9 the standard android cam is able to read barcodes (if it is not replaced with something vendor specific). Even if the result will be ‘could not handle this file’.

Yes, you are right, the iPhone is more tolerant to scan. I have no Apple device with me, at the moment.
We don’t need to discus, because the ‘quiet zone’ is part of the QR Code Standard … But I’ll test:

Mobile Android App dark light
Sony Xperia IV 10 13 Standard no yes
Sony Xperia IV 10 13 WireGuard no yes
Motorola Moto G8 Plus 10 Standard no yes
Motorola Moto G8 Plus 10 Barcode Scanner (ZXing Team) no yes
Google Nexus 7 11 (Lineage 18.1) Standard App no no
Google Nexus 7 11 (Lineage 18.1) WireGuard no yes

For more tests I need to charge the phones.
I would be interested if it works in the WireGuard App on an iPhone.

I need to setup my lab network, to test with manual border.

4

Thanks for testing, we will add the border in the next version.
But I am a little worried that it may be due to color difference or other reasons, can you test it directly with this image? It added 4px border.

image
image414×896 19.3 KB

5

Yes, I’ll test when I’m home.

Edit:
Your screenshot works perfect, in every constellation I’ve listed above. @yuxin.zou