-
Notifications
You must be signed in to change notification settings - Fork 45
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
Hotfix: tiny CSS update to List component -- workaround to wrapping related issue in Safari #1805
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm ok with rolling with this for now. If you look at the history, we keep adding and removing this 1px. When this 1px is added, it will create horizontal scroll in other browsers IF the list is edge to edge (either on the page container or some kind of box), which is not that often. Let's add a comment to the code to explain that.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I confirmed that this fix causes List to overflow the container by some fraction of a pixel, even in Chrome. We don't see it because there is overflow-x: hidden
on the body. I forget the exact scenario where this popped up before, but it becomes a problem anytime you want to use List inside a container with overflow: auto
.
Out of curiosity, I removed the width
rule altogether and tested Chrome, Safari, FF, and Edge. The Completed Training template and the list demos appear to work as expected without it. @mikemai2awesome, do you remember the specific FF issue the width
rule was added for? Perhaps it was for an older version of FF? 🤞
Here's my branch, tests are passing.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Out of curiosity, I removed the
width
rule altogether and tested Chrome, Safari, FF, and Edge. The Completed Training template and the list demos appear to work as expected without it. @mikemai2awesome, do you remember the specific FF issue thewidth
rule was added for? Perhaps it was for an older version of FF?
@danielamorse Do the following and test again. If all good then let's roll with that.
// Spacing Prop
@each $spacing-value in $bolt-spacing-values {
$spacing-value-name: nth($spacing-value, 1);
.c-bolt-list--spacing-#{$spacing-value-name}:not(.c-bolt-list--inset) {
margin-bottom: bolt-v-spacing(#{$spacing-value-name}) * -1;
margin-left: bolt-spacing(#{$spacing-value-name}) * -1;
}
@-moz-document url-prefix() {
.c-bolt-list--spacing-#{$spacing-value-name}.c-bolt-list--inset {
// The inline here is talking about the items inside, the List component itself is still a block level element that would fill up the space of any container.
&.c-bolt-list--display-inline,
&.c-bolt-list--display-flex {
width: 100%; // Width must be defined in order for the list to dislay correctly in Firefox.
}
@each $breakpoint in $bolt-breakpoints {
$breakpoint-name: nth($breakpoint, 1);
&.c-bolt-list--display-inline\@#{$breakpoint-name} {
@include bolt-mq($breakpoint-name) {
width: 100%; // Width must be defined in order for the list to dislay correctly in Firefox.
}
}
}
}
.c-bolt-list--spacing-#{$spacing-value-name}:not(.c-bolt-list--inset) {
// The inline here is talking about the items inside, the List component itself is still a block level element that would fill up the space of any container.
&.c-bolt-list--display-inline,
&.c-bolt-list--display-flex {
width: calc(
100% + #{bolt-spacing($spacing-value-name)}
); // Width must be defined in order for the list to dislay correctly in Firefox.
}
@each $breakpoint in $bolt-breakpoints {
$breakpoint-name: nth($breakpoint, 1);
&.c-bolt-list--display-inline\@#{$breakpoint-name} {
@include bolt-mq($breakpoint-name) {
width: calc(
100% + #{bolt-spacing($spacing-value-name)}
); // Width must be defined in order for the list to dislay correctly in Firefox.
}
}
}
}
}
.c-bolt-list--spacing-#{$spacing-value-name}.c-bolt-list--inset {
@include bolt-margin-bottom(0);
@include bolt-margin-left(0);
}
}
@mikemai2awesome @sghoweri Mike's suggestion above appears to be working. I created PR #1806 with his change since I wanted to test it separately and because I don't think we're planning to release this as a hotfix. If you guys approve #1806 we can close this one out. |
Closing out in lieu of #1806 - thanks @danielamorse |
Jira
Summary
Adds a tiny
1px
addition to the twocalc(width: 100% + X)
rules in the List component as a workaround to address quirky wrapping behavior.Safari - Before
![safari--before](https://user-images.githubusercontent.com/1617209/78138141-76c41d80-73f4-11ea-8c9a-8fbce14dae2e.gif)
Safari - After
![safari--after](https://user-images.githubusercontent.com/1617209/78138125-7035a600-73f4-11ea-9237-d74b68d3db1a.gif)
Details
Technically adding
0.4px
seems to work (making me suspect that this could be related to a Webkit sub-pixel rounding issue / quirk) -- in either case, this change should basically be unnoticable, other than addressing the main layout wrapping issue in Safari.How to test