Skip to content
This repository was archived by the owner on Jan 6, 2025. It is now read-only.

Sub-Pixel calculation issue #1001

Closed
charsleysa opened this issue Jan 20, 2019 · 2 comments · Fixed by #1004
Closed

Sub-Pixel calculation issue #1001

charsleysa opened this issue Jan 20, 2019 · 2 comments · Fixed by #1004
Assignees
@ThomasBurleson
Labels
discussion Further discussion with the team is needed before proceeding has pr A PR has been created to address this issue help wanted The team would appreciate a PR from the community to address this issue P5 Low-priority issue that needs consideration
Milestone
7.0.0-beta.24

Comments

@charsleysa
Copy link
Contributor

Bug Report

What is the expected behavior?

No problems caused by subpixel calculations by browsers.

What is the current behavior?

If the browser ends up with the width of the viewport set to something like 1279.5px then neither the md nor the lg breakpoints match.

What are the steps to reproduce?

Here's a codepen showing the issue using basic CSS but same applies to this library: https://codepen.io/anon/pen/VqoGXP

image

What is the use-case or motivation for changing an existing behavior?

This really starts to apply to higher density screens with scaling turned of (such as a 2160p monitor with Windows set to 150% scaling and using 2 browsers on each half of the screen).

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

All.

Is there anything else we should know?

The fix is pretty simple, just add .9999 to the end of all the pixel values that are 1px less than the next break point (e.g. the md breakpoint max-width would be set to 1279.9999px).
@CaerusKaru CaerusKaru added help wanted The team would appreciate a PR from the community to address this issue P5 Low-priority issue that needs consideration discussion Further discussion with the team is needed before proceeding labels Jan 21, 2019
@CaerusKaru
Copy link
Member

CaerusKaru commented Jan 21, 2019 •
edited
Loading

In an absolutely ideal world, we would switch the syntax for our media queries to use Media Query Level 4 syntax (< 1280px and >= 1280px, etc). However, this is not an ideal world because that wouldn't work on IE11 and most older browsers.

I'll discuss modifying the media queries with @ThomasBurleson. In the meantime, if you'd like to submit a PR for this, we'd be happy to review it when ready.

ThomasBurleson added a commit that referenced this issue Jan 21, 2019
@ThomasBurleson
fix(core): update breakpoint ranges to remove subpixel gaps
e4053bb 
In rare cases, browsers resizing my create viewports with subpixel values.
Previous mediaQueries had 1 pixel gaps where the bounding ranges do not match.

Update the `max-width` values to include subpixel values and eliminate 99.99% of all gaps.

Fixes #1001.
@ThomasBurleson ThomasBurleson mentioned this issue Jan 21, 2019
Merged
ThomasBurleson added a commit that referenced this issue Jan 21, 2019
@ThomasBurleson
fix(core): update breakpoint ranges to remove subpixel gaps
0ee6796 
In rare cases, browsers resizing my create viewports with subpixel values.
Previous mediaQueries had 1 pixel gaps where the bounding ranges do not match.

Update the `max-width` values to include subpixel values and eliminate 99.99% of all gaps.

Fixes #1001.
@CaerusKaru CaerusKaru added the has pr A PR has been created to address this issue label Jan 21, 2019
@CaerusKaru CaerusKaru added this to the 7.0.0-beta.24 milestone Jan 21, 2019
CaerusKaru pushed a commit that referenced this issue Jan 21, 2019
@ThomasBurleson @CaerusKaru
fix(core): update breakpoint ranges to remove subpixel gaps (#1004)
1154fae 
In rare cases, browsers resizing may create viewports with subpixel values.
Previous mediaQueries had 1 pixel gaps where the bounding ranges do not match.

Update the `max-width` values to include subpixel values and eliminate 99.99% of all gaps.

Fixes #1001.
ThomasBurleson added a commit that referenced this issue Jan 23, 2019
@ThomasBurleson
update(core): align breakpoints with those used in CDK
acb0aed 
@angular/cdk BreakpointObserver will not replace `MediaObserver`. **MediaObserver** is an enhanced version that notifies subscribers of activations for standard AND **overlapping (lt-xxx, gt-xxx)**  breakpoints.

* Ensure standard breakpoints mediaQueries are aligned with those in the CDK
* Update MediaObserver
  * isActive() enhanced to support list of aliases to determine if any match
  * properly disconnects subscribers when destroyed

> Note: Developers should use MediaObserver (not use MatchMedia) service to observe breakpoint activations! MediaObserver is the recommended service to use for application developers; MatchMedia should be considered a private service.

Fixes #685. Refs #1001.
@ThomasBurleson ThomasBurleson mentioned this issue Jan 23, 2019
Merged
CaerusKaru pushed a commit that referenced this issue Jan 23, 2019
@ThomasBurleson @CaerusKaru
fix(core): align breakpoints with those used in CDK (#1006)
6f43cf6 
@angular/cdk BreakpointObserver will not replace `MediaObserver`. **MediaObserver** is an enhanced version that notifies subscribers of activations for standard AND **overlapping (lt-xxx, gt-xxx)**  breakpoints.

* Ensure standard breakpoints mediaQueries are aligned with those in the CDK
* Update MediaObserver
  * isActive() enhanced to support list of aliases to determine if any match
  * properly disconnects subscribers when destroyed

> Note: Developers should use MediaObserver (not use MatchMedia) service to observe breakpoint activations! MediaObserver is the recommended service to use for application developers; MatchMedia should be considered a private service.

Fixes #685. Refs #1001.
@k0hamed k0hamed mentioned this issue May 30, 2019
Merged
CaerusKaru pushed a commit that referenced this issue May 30, 2019
@k0hamed @CaerusKaru
fix(core): update breakpoints ranges to avoid overlapping (#1075)
31cb34e 
In Chrome, .99 is treated as 1 which cause ranges to overlap at the exact breakpoint.

> Note: the behavior might not be considered as a bug in chrome as in [W3 specifications](https://www.w3.org/TR/mediaqueries-4/#mq-min-max) it's mentioned that for sub-pixels or fractions it's preferred to use [the not widely supported range context](https://www.w3.org/TR/mediaqueries-4/#range-context).

Fixes #1052. Affects #1001.
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 5, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@ThomasBurleson ThomasBurleson

Labels
discussion Further discussion with the team is needed before proceeding has pr A PR has been created to address this issue help wanted The team would appreciate a PR from the community to address this issue P5 Low-priority issue that needs consideration
Projects
None yet
Milestone
7.0.0-beta.24
Development

Successfully merging a pull request may close this issue.

fix(core): update breakpoint ranges to remove subpixel gaps angular/flex-layout
3 participants
@ThomasBurleson @CaerusKaru @charsleysa