Prismic toolbar global css classes

I´ve implemented Prismic toolbar on our site islandsbanki.is and lately we notice a strange bug in Microsoft Edge 44.18362.449.0. There seems to be that the toolbar loads in css with rater global classnames such as .border thats messes styles where we use this same classname.
There are also classnames such as spinning-loader and toolbar-header that are way to genaral to be exposed like that.
I´m not sure why this only affect Edge and not other browsers including the new Edge browser (chromium)

Hello Kristleifur, thanks for reaching out!

This is the first time we hear about this.
Could you share more information with us, like screenshots, to see how these CSS attributes conflict with each other so that we can investigate further?

This problem only appears in Microsoft Edge 44.18362.449.0. You can replicate this by going to https://islandsbanki.is and click the speech ballon in the lower right corner.

A modal should popup

For the modal header we use this class
.modal__header.border

And the .border class from Toolbar is messing things up.

.border{
width:15px;
height:1px;
background:#bcc2cb;
vertical-align:middle;
}

P.S Why can I only add one screenshot?

I’ve seen that you’re getting a warning in the console of the page: https://islandsbanki.is. To update it you go to your repository settings/previews and change the script you have on your project for the one you have on your repository.

If this doesn’t solve the problem let me know

That didn´t solve the propblem.
The warning disappeared but the problem exists, tested locally.

I also noticed that Prismic backend doesn´t work in this version of Edge, its not a problem for us though.

Hello again!

Could you share with me a screenshot of the error that the toolbar causes on the CSS of the modal, of, is it the one that you already posted here, the only difference I see in the image is a small gray square at the top of the modal, is that it?

Having a visual reference would help a lot for informing the dev team of this issue.

By the way, it is possible to post many images in a post here, are you not being able to do so?

Thanks a lot

1 Like

Might be something to do with trust levels.

1 Like

It can be seen on my previous screenshot.

You can see in the Chrome screenshot that the text should be centered and there should be a bottom border. Part of the text disappears in Edge and that gray box appears.

border{
  width:15px;
  height:1px;
  background:#bcc2cb; 
  vertical-align:middle;
} 

This is the css code that overwrites our css.

Hey Kristleifur, just wanted you to know that I’ve informed the team about this issue and they will review it as soon as possible. I’ll keep you updated here on any changes.

Thanks a lot

1 Like

Hey Kristleifur, we are looking at your case and we have a few questions.
Can you confirm that visitors don’t have the issue and only your team is experiencing this?
Could you work with another browser than Edge or a newer version? Is there something specific that you need to test on that browser? because that version is quite old.

This issue is not only experienced by our team, that is the problem. Regular visitors experience this also and of course they are not logged into Prismic.
According to Google Analytics there is about 1% visitors using this version of Edge.

Have you tested our site in this version of Edge? Can you confirm that you see this issue?

Hey Kristleifur, how's it going?!
Just to let you know that the team has reviewed this case and we're going to add it to the backlog for future improvements. If there's any news about this we'll inform you about it here.

Thanks a lot

1 Like