Broken QR codes due to style position error.
AdrienLemaire opened this issue · 5 comments
Describe the bug
The corners' inner squares aren't always aligned, which breaks the QR code (unscannable).
I can only reproduce the bug on a mobile chrome web browser (which is the target we focus on), seems to always work fine on a chrome desktop (I can still reproduce using the debugger device toolbox to simulate a mobile device from desktop).
Seems related to #182
Expected behavior
The inner squares should be properly centered
Screenshots
Identical page, different position mode:
Portrait (broken):
Landscape (working):
Desktop (please complete the following information):
- Browser [e.g. chrome, safari] Chrome
- Version [e.g. 22]: 107
Smartphone (please complete the following information):
- Device: [e.g. iPhone6] Pixel 6
- OS: [e.g. iOS8.1] Android 13
- Browser [e.g. stock browser, safari] Chrome
- Version [e.g. 22] 107
Additional context
Seems to be a styling issue, but I don't know how to debug this kind of error.
After trying to debug this issue further, I understand that canvas.drawRRect receives the exact same values to place the eyes, but when the device type is "mobile", the outerRect will have a wrong left & top offset added.
Changing the DPR doesn't have any effect, but for the same viewport, changing the device type has an effect ("desktop" works, "mobile" breaks).
Values passed to Rect.fromLTWH in both cases
*** Drawing square eye
outerRect: 8, 8, 57, 57
innerRect: 17.5, 17.5, 38, 38
dotRect: 22.25, 22.25, 28.5, 28.5
*** Drawing square eye
outerRect: 8, 255, 57, 57
innerRect: 17.5, 264.5, 38, 38
dotRect: 22.25, 269.25, 28.5, 28.5
*** Drawing square eye
outerRect: 255, 8, 57, 57
innerRect: 264.5, 17.5, 38, 38
dotRect: 269.25, 22.25, 28.5, 28.5
mobile:
desktop:
2nd insight: This could be a Chrome-specific bug. Opening the page in a webview (for example, by scanning the QR code and navigate to that website) works fine (creating a QR code will diplay the eyes properly).
pinging the authors for help:
@lukef @kevmoo @romkor @Cretezy @kelegorm @pedromassango @lukepighetti @jonas-zebari
I THINK this is due to drawing logic. Put in the same input here: https://kevmoo.github.io/qr.dart/ - which uses browser APIs (Dart, but not flutter)