What steps will reproduce the problem?
1. You need mod_invites and mod_invites_register_web in particular
2. Create invite, open link with web browser, click on "Scan with mobile device" top-right corner
3. The QR code shown is missing the so called quiet zone. This is only visible if the user has chosen to use a custom dark background.
What is the expected output?
There should be an all white (ish) box around the QR code of "4 modules width" (one module is the size of a black "pixel" within the QR code.
What do you see instead?
If using a custom stylesheet that sets all backgrounds to black, there is no white border around the QR code.
What version of the product are you using? On what operating system?
Latest from source.
Please provide any additional information below.
I've "stolen" your code for ejabberd's upcoming implementation of mod_invites and I've fixed it with this patch on my end (there are sure better ways to do it, but I'm no CSS expert):
diff --git a/priv/mod_invites/client.html b/priv/mod_invites/client.html
index d95780077..5b0eb9f30 100644
--- a/priv/mod_invites/client.html
+++ b/priv/mod_invites/client.html
@@ -102,7 +102,7 @@
<p>You can transfer this invite to your mobile device by scanning a code with your camera.</p>
<div id="qr-info-url" class="tab-pane show active">
<p>Use a <em>QR code</em> scanner on your mobile device to scan the code below:</p>
- <div id="qr-invite-page" class="w-50 p-1 mx-auto"></div>
+ <div id="qr-invite-page" style="width: 304px;" class="bg-white p-4 mx-auto"></div>
</div>
</div>
<div class="modal-footer">
diff --git a/priv/mod_invites/invite.html b/priv/mod_invites/invite.html
index bce29ff3b..f0684d895 100644
--- a/priv/mod_invites/invite.html
+++ b/priv/mod_invites/invite.html
@@ -90,7 +90,7 @@
<p>You can transfer this invite to your mobile device by scanning a code with your camera.</p>
<div id="qr-info-url" class="tab-pane show active">
<p>Use a <em>QR code</em> scanner on your mobile device to scan the code below:</p>
- <div id="qr-invite-page" class="w-50 p-1 mx-auto"></div>
+ <div id="qr-invite-page" style="width: 304px;" class="bg-white p-4 mx-auto"></div>
</div>
</div>
<div class="modal-footer">
The user who reported this problem to me is using a Firefox extension called Dark Reader and they are still seeing the same issue, because it would just override any background-color settings apparently. So the solution is to include the quiet zone with the generated image rather than making it something external to it. That would also yield portability, i.e. you could copy, save, send the QR code image itself and it would still be guaranteed to be valid.
What steps will reproduce the problem? 1. You need mod_invites and mod_invites_register_web in particular 2. Create invite, open link with web browser, click on "Scan with mobile device" top-right corner 3. The QR code shown is missing the so called quiet zone. This is only visible if the user has chosen to use a custom dark background. What is the expected output? There should be an all white (ish) box around the QR code of "4 modules width" (one module is the size of a black "pixel" within the QR code. What do you see instead? If using a custom stylesheet that sets all backgrounds to black, there is no white border around the QR code. What version of the product are you using? On what operating system? Latest from source. Please provide any additional information below. I've "stolen" your code for ejabberd's upcoming implementation of mod_invites and I've fixed it with this patch on my end (there are sure better ways to do it, but I'm no CSS expert): diff --git a/priv/mod_invites/client.html b/priv/mod_invites/client.html index d95780077..5b0eb9f30 100644 --- a/priv/mod_invites/client.html +++ b/priv/mod_invites/client.html @@ -102,7 +102,7 @@ <p>You can transfer this invite to your mobile device by scanning a code with your camera.</p> <div id="qr-info-url" class="tab-pane show active"> <p>Use a <em>QR code</em> scanner on your mobile device to scan the code below:</p> - <div id="qr-invite-page" class="w-50 p-1 mx-auto"></div> + <div id="qr-invite-page" style="width: 304px;" class="bg-white p-4 mx-auto"></div> </div> </div> <div class="modal-footer"> diff --git a/priv/mod_invites/invite.html b/priv/mod_invites/invite.html index bce29ff3b..f0684d895 100644 --- a/priv/mod_invites/invite.html +++ b/priv/mod_invites/invite.html @@ -90,7 +90,7 @@ <p>You can transfer this invite to your mobile device by scanning a code with your camera.</p> <div id="qr-info-url" class="tab-pane show active"> <p>Use a <em>QR code</em> scanner on your mobile device to scan the code below:</p> - <div id="qr-invite-page" class="w-50 p-1 mx-auto"></div> + <div id="qr-invite-page" style="width: 304px;" class="bg-white p-4 mx-auto"></div> </div> </div> <div class="modal-footer">
https://linkmauve.fr/files/Screenshot%20From%202025-11-04%2013-16-49.png
The user who reported this problem to me is using a Firefox extension called Dark Reader and they are still seeing the same issue, because it would just override any background-color settings apparently. So the solution is to include the quiet zone with the generated image rather than making it something external to it. That would also yield portability, i.e. you could copy, save, send the QR code image itself and it would still be guaranteed to be valid.