Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(dialog): avoid subpixel rendering issues and refactor GlobalPositionStrategy #1962

Merged
merged 5 commits into from
Dec 2, 2016

Conversation

crisbeto
Copy link
Member

Refactors the GlobalPositionStrategy to use flexbox for positioning. This avoids the subpixel rendering issues that come with using transforms for centering.

Fixes #932.

@googlebot googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Nov 22, 2016
z-index: $md-z-index-overlay-container;
}

// Wrapper element for the panes that use the GlobalPositionStrategy.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Expand this with something like

// We use an extra wrapper element in order to use make the overlay itself a flex item.
// This makes centering the overlay easy without running into the subpixel rendering
// problems tied to using `transform`.

private _rightOffset: string = '';
private _alignItems: string = '';
private _justifyContent: string = '';
private _wrapper: HTMLElement;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add description for _wrapper that explains what it's for and that it's lazily created.

@@ -3,4 +3,7 @@ export interface PositionStrategy {

/** Updates the position of the overlay element. */
apply(element: Element): Promise<void>;

/** Cleans up any DOM modifications made by the position strategy, if necessary. */
dispose?(): void;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's make this required and give ConnectedPositionStrategy a no-op dispose, then we won't have to check whether it exists before calling it.

…ionStrategy

Refactors the `GlobalPositionStrategy` to use flexbox for positioning. This avoids the subpixel rendering issues that come with using transforms for centering.

Fixes angular#932.
@crisbeto crisbeto force-pushed the global-position-flexbox-proper branch from 348cb42 to eab458f Compare December 2, 2016 18:00
@crisbeto
Copy link
Member Author

crisbeto commented Dec 2, 2016

Applied the feedback and rebased.

@jelbourn jelbourn added pr: lgtm action: merge The PR is ready for merge by the caretaker and removed pr: needs review labels Dec 2, 2016
@jelbourn
Copy link
Member

jelbourn commented Dec 2, 2016

LGTM

@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 6, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
action: merge The PR is ready for merge by the caretaker cla: yes PR author has agreed to Google's Contributor License Agreement
Projects
None yet
Development

Successfully merging this pull request may close these issues.

bug(overlay): overlays are sometimes blurred in Chrome
4 participants