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 focused header layout for IE11 #10017

Merged
merged 2 commits into from Sep 20, 2018

Conversation

Projects
None yet
2 participants
@brandonpayton
Member

brandonpayton commented Sep 18, 2018

Description

This PR addresses a layout bug in IE11 which occurs when using Ctrl + backtick to navigate regions and focusing the header region.

screenshot 34

Closes #8008.

How has this been tested?

Manually tested by navigating to the header region in IE11, Edge, Chrome, Firefox, and Safari and observing no undesired layout changes.

Types of changes

The layout issue is caused by a combination of:

  • IE11 implementing an earlier version of the flexbox spec which considers absolutely positioned items when calculating flexbox layout.
  • Our focused region styles which add an :after pseudo element to draw the focused region outline.

The focused region outline is absolutely positioned, but IE11 adds space between it and the last header element, shifting the UI to the left. This PR adds a workaround that moves the pseudo element in the flex order where the undesired extra space does not visibly affect the layout.

@brandonpayton brandonpayton self-assigned this Sep 18, 2018

@brandonpayton brandonpayton requested a review from jasmussen Sep 18, 2018

@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Sep 19, 2018

Contributor

Very cool work, thanks for working on this. Confirmed, it fixes it:

screen shot 2018-09-19 at 09 02 07

However right now this is implemented for all browsers, not just IE.

Should we use our IE hack to unset this rule for modern browsers? It works sort of like this:

rule: value; // Rule for IE

@supports(position: sticky) {
rule: value; // Rule that overrides IE rule for modern browsers.
}
Contributor

jasmussen commented Sep 19, 2018

Very cool work, thanks for working on this. Confirmed, it fixes it:

screen shot 2018-09-19 at 09 02 07

However right now this is implemented for all browsers, not just IE.

Should we use our IE hack to unset this rule for modern browsers? It works sort of like this:

rule: value; // Rule for IE

@supports(position: sticky) {
rule: value; // Rule that overrides IE rule for modern browsers.
}
@brandonpayton

This comment has been minimized.

Show comment
Hide comment
@brandonpayton

brandonpayton Sep 20, 2018

Member

Thanks, @jasmussen, that's a good idea. I added a reset to the default order for modern browsers.

Member

brandonpayton commented Sep 20, 2018

Thanks, @jasmussen, that's a good idea. I added a reset to the default order for modern browsers.

@jasmussen

Nice work, ship it!

@brandonpayton brandonpayton merged commit 652a09c into master Sep 20, 2018

2 checks passed

codecov/project 48.68% (-0.1%) compared to e0e6668
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details

@brandonpayton brandonpayton deleted the fix/ie11-focused-header-layout branch Sep 20, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment