fix(typography): Reverted baseline mixin to use display inline-block #3297
Conversation
… because of IE issues
abhiomkar
changed the title
|
|
||
| <h2 class="demo-typography__title mdc-typography--headline6">Our Changing Planet</h2> | ||
| <h3 class="demo-typography__subtitle mdc-typography--subtitle2">by Kurt Wagner</h3> | ||
| <div class="demo-typography__body mdc-typography--body2">Visit ten places on our planet that are undergoing the biggest changes today.</div> | ||
| <line class="demo-typography-line-1">+34px</line> |
There was a problem hiding this comment.
Why are we using a non-standard <line> element instead of a <div> or something?
| @@ -77,6 +77,8 @@ in the double line list style as defined by | |||
| </ul> | |||
| ``` | |||
|
|
|||
| > NOTE: Make sure there are no white-space characters before primary and secondary text content. | |||
There was a problem hiding this comment.
Is there another way to implement these mixins that doesn't choke on whitespace?
I suspect a lot of people are going to run into this, and it's going to take them a while to figure out why their UI suddenly broke.
There was a problem hiding this comment.
I would like there to be a way, but flex-box was the one way we figured...but that causes the current problem where IE and Edge don't work correctly, and for now we'd rather make the feature work everywhere.
The odd bit is if anything, I'd say IE and Edge are working as I'd expect all browsers to. It's more of a mystery to me why switching to flex still worked in the others.
There was a problem hiding this comment.
Since the baseline struts (before & after pseudo elements) use display: inline-block it leaves extra space around before the text when white-space characters are inserted. We avoided this problem by using flex box before but IE / Edge renders them differently on pseudo elements.
It shouldn't create any issues for users who are using frameworks while vanilla component users should use this with caution.
|
All 176 screenshot tests passed for commit 6b6a943 vs. |
Flexbox works differently with pseudo elements on Chrome/FF vs IE/Edge. Reverted mixin to use display inline-block.
BREAKING CHANGE: Updates to typography baseline mixin which requires the text element to strip the white-space. Helper text and MDC List two line text should strip the white-space.