Fix qrbox border placement #555
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
A video element behave like an inline element, which mean it honours whitespace around. When in a div with whitespace it adds empty spaces. ref: https://stackoverflow.com/a/36397260
Using the bottom allow the 4 boxes on the bottom of the qrbox to be pixel perfect on the bottom of the qrbox area, instead of relying on the qrbox size that can be with a floating point.
Merged
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
First commit fix an issue where the wrapping element of the video element added some whitespaces and made the qrbox overflow. ref: https://stackoverflow.com/a/36397260
Second commit now fix an issue raised by the first fix, the qrbox borders are based on the size of the viewFinder size, problem is when the viewFinder height has a floating point the position of the 4 bottom borders are now based on half of a rounder floating number.
This PR also had the issue with 5px too much, this is because the 4 bottom borders where placed in relation to the viewFinder area + adding 5px to compensate the whitespace from the video element.
Final result:
