Skip to content
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

Conflict between Google maps & Boosted (V5.3) #2496

Open
3 tasks done
MathieuPomm opened this issue Mar 4, 2024 · 1 comment · May be fixed by #2501
Open
3 tasks done

Conflict between Google maps & Boosted (V5.3) #2496

MathieuPomm opened this issue Mar 4, 2024 · 1 comment · May be fixed by #2501

Comments

@MathieuPomm
Copy link

Prerequisites

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).

map_issue

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/[email protected]/dist/css/boosted.min.css" rel="stylesheet" integrity="sha384-laZ3JUZ5Ln2YqhfBvadDpNyBo7w5qmWaRnnXuRwNhJeTEFuSdGbzl4ZGHAEnTozR" crossorigin="anonymous">
After execution, we have :
image

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

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
Copy link
Member

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.

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

Successfully merging a pull request may close this issue.

3 participants