[Site] Support dpi > 100% for media queries #567
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
lubber-de
added
type/bug
lubber-de
removed
the
state/awaiting-reviews
Merged
This was referenced Apr 23, 2019
y0hami
pushed a commit
that referenced
this pull request
Apr 26, 2019
Especially recognized in table or grid elements a breakpoint wasn't correctly fetched by the browsers, because the floating max value covers a 0.99 of the "before pixel" (was implemented by #567) While mathematically correct, it was not working on the browser to correctly recognize the next full pixel again. (768 pixel were still recognized as something below) I found out that it was working again when we'll use 0.98 of the breakpoint pixel (instead of 0.99. This way the dpi fix of #567 still works but also fixes #681 now. While i was testing with different dpi settings and windows resizings, i never came across a value of xxxx.99, so xxxx.98 as a breakpoint should fix both issues now. Closes #681
exoego
pushed a commit
to exoego/Fomantic-UI
that referenced
this pull request
Apr 30, 2019
Especially recognized in table or grid elements a breakpoint wasn't correctly fetched by the browsers, because the floating max value covers a 0.99 of the "before pixel" (was implemented by fomantic#567) While mathematically correct, it was not working on the browser to correctly recognize the next full pixel again. (768 pixel were still recognized as something below) I found out that it was working again when we'll use 0.98 of the breakpoint pixel (instead of 0.99. This way the dpi fix of fomantic#567 still works but also fixes fomantic#681 now. While i was testing with different dpi settings and windows resizings, i never came across a value of xxxx.99, so xxxx.98 as a breakpoint should fix both issues now. Closes fomantic#681
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.
Description
Using higher Screen-DPI Settings (on Windows) than 100% leads to some possible "floating value pixels" for width like "767.2px"
The current breakpoints for every component are always set in full 1px difference. This creates a uncovered gap between 767 and 767.99 now where no media query covers a different visibility setting making every usually hidden element appear.
Testcase
For simplicity the jsfiddle only covers the grid-element. But the PR just changes the breakpoints so every other element using media queries will get fixed at compile time aswell
Broken
https://jsfiddle.net/o04hrpfL/1/show
Fixed
https://jsfiddle.net/o04hrpfL/show
Screenshot
Closes
#385