Conflict between Google maps & Boosted (V5.3)

[MathieuPomm]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

Hello @julien-deramond

We have noted recently that when we have an interaction with a Google maps, it works at first but then the map is frozen and we can't interact with the map. (cf. GIF enclosed).

Following short investigation by our partner, they have noted that this is linked to the latest Boosted update (V5.3).
issue seems to come from CSS (if we use older CSS, we have no longer the issue).

you can reproduce it like this :

On Google's jsfiddle example of map integration, if we try to inject the latest Boosted css, we reproduce exactly the problem.
Here's the link to the basic jsfiddle: https://jsfiddle.net/gh/get/library/pure/googlemaps/js-samples/tree/master/dist/samples/add-map/jsfiddle
On line 11 of the html block if you add this line:
<link href="https://cdn.jsdelivr.net/npm/boosted@5.3.3/dist/css/boosted.min.css" rel="stylesheet" integrity="sha384-laZ3JUZ5Ln2YqhfBvadDpNyBo7w5qmWaRnnXuRwNhJeTEFuSdGbzl4ZGHAEnTozR" crossorigin="anonymous">
After execution, we have :

origin of the issue seems to be a property in Boosted CSS :

This is quite urgent on our side, because that means that currently, most of maps integrated (including eligibility journeys and Store Locator) on our assets are no longer working...

In short term, we will do an override in our css custom to erase this property, but it would be more appreciated if you can correct in next version.

Thanks for your help !

Reduced test cases

cf. above in description

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Firefox

What version of Boosted are you using?

5.3

[julien-deramond]

Thanks for reporting this issue @MathieuPomm, the reproducible environment was really helpful for the analysis. We plan to fix this issue for the next release which should be a v5.3.4.
To fix it, we will probably drop the z-index: 5 rule from :focus and make it more explicit within the components to avoid this kind of impact on external components/libraries.