@preflight causing issue with Google Maps InfoWindows

[kylemilloy]

In the preflight.css file on line ~540 we see:

*,
*::before,
*::after {
  border-width: 0;
  border-style: solid;
  border-color: config('borderColors.default', currentColor);
}

The border-style: solid; style on the catch all (*, not its pseudo-selectors) is causing extra absolutely positioned elements in Google Maps to be broken

I have found that adding a separate selector underneath fixes the problem:

* {
  border-style: inherit;
}

Before border-style: inherit;

After adding border-style: inherit;

``

[kylemilloy]

I'll write a quick pull for this...

[kylemilloy]

#484

[lbjones]

I've found that this rule in the preflight border-style: solid; oddly is making it so the buttons i'm using (https://material-components.github.io/material-components-web-catalog/#/component/button) no longer ripples when clicked.

Unfortunately I can't for the life of me figure out a workaround. If I create my own preflight and remove that rule, I now have a huuuge application that I need to refactor that previously depended on that rule. Hmmmmmm....

[kylemilloy]

The ::before/::after calls may be the culprit here though that's a WAG w/o seeing your work.

// Line 545 in preflight.css
*,
*::before,
*::after {
  border-width: 0;
  border-style: solid;
  border-color: config('borderColors.default', currentColor);
}

Maybe in .mdc-button you could add the following?

.mdc-button {
  border-style: inherit;
  &::before,
  &::after {
    border-style: inherit;
  }
}


// AND/OR

.mdc-button.mdc-ripple-upgraded {
  border-style: inherit;
  &::before,
  &::after {
    border-style: inherit;
  }
}

Do this after calling @tailwind preflight; and it should be overwritten, no?

Looking at the button elements in the MDC page you linked they definitely make use of ::before and ::after selectors so that may be the culprit.

[lbjones]

Hey many thanks for the help @kylemilloy . I have tried this and several dozen variations on this; border-style: inherit;, border-style: none;, border-style: initial;, border-style: unset;. I also tried putting the code in all sorts of places in case it was a specificity issue. I also tried to rewrite this rule in preflight with a bunch of :not() selectors. Nothing has worked yet! Anyway, I'll keep digging.

[kylemilloy]

And if you remove preflight the ripple effect works again? Have you tracked it specifically to the border-style assignment on line 545 or is it possible it could be an issue with some other wildcard selector like:

// Line 466
*,
*::before,
*::after {
  box-sizing: inherit;
}

[lbjones]

Yep - by process of elimination I found the culprit alone is border-style: solid on line 433 of the preflight. You must have an older version of the preflight than I.

https://github.com/tailwindcss/tailwindcss/blob/master/css/preflight.css

[kylemilloy]

Heh -- lemme update my version of preflight so we're talking the same language.

Have you tried removing one or the other to see which pseudo-selector is effecting it? ::before? ::after?

There also seems to be some :hover::before selectors being used in the MDC code base. Have you looked into these?

In my experience I found that using a custom preflight where I removed the border-style code, then imported my map specific styles, then added back in the border style wildcard did the trick...seems like it's a situation where "once the toothpaste is out of the tube, you can't get it back in". Really bizarre. You may also want to make a mixin for items that apply the border-* style to include the rules on 466...a little more cumbersome but a potential resolution.

[lbjones]

Hey thanks again, for the help. The ripple works when I do this:

* {
  border-width: 0;
  // border-style: solid;  // this line messes with mdc-button ripple
  border-color: config('borderColors.default', currentColor);
}
*::before {
  border-width: 0;
  border-style: solid;
  border-color: config('borderColors.default', currentColor);
}
*::after {
  border-width: 0;
  border-style: solid;
  border-color: config('borderColors.default', currentColor);
}

Looking into MDC is the next step, but it's quite complex. I'm thinking the JS may disable the ripple when conditions are not perfect.

[kylemilloy]

Yeah I've been looking at that for the last little while and it sure is pretty complex. Have you tried using an unbounded ripple button as well? I see these referenced in the source code and js and they behave a little differently.

[lbjones]

Tried that too! Still no luck. My bad for picking such a complex button.