Flickering hover state in safari

Design help General
1

Hey everyone :slight_smile:
This forum has helped me so much and today I need help for an issue I can’t seem to find a solution for…

I’m making a clickable map for a client. The map has some white absolute positioned pins and a hover state which replaces the white SVG icon to the same SVG icon in green.

I have two issues there :
it works fine in chrome but in Safari the icon flickers (the green icon appears slightly smaller and then becomes the right size)
Did I do something wrong in terms of sizing, or hover state parameters, background parameters? Both icon are backgrounds to a small div sized in percentage in order to follow the right area on the map when the window is resized.

Is there a bit of custom code to prevent that from happening in safari, or any workaround to have the same hover effect?

Second issue :
I tried my website on a samsung tablet and whenever I click on a pin the cards appear but the pin disappears… I think I opened it with the default browser for samsung tablets. Any idea why ? I don’t even know what to look for and what could cause that behaviour…

Hope this was clear, let me know if I can provide any more informations!! Hope someone can help me with this :sleepy: :pray: :pray: :pray:

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hi @Milla_Barbanera please share a preview of your project, so we can take a look at it

3

Hello @new_york_city :slight_smile:
I shared my Read only link I thought this was enough ?
But here’s a gif… hope that helps

Map

4

Ahh, didnt see that, my bad.
I changed the map-pin from percentages to pixels and the problem dissapeard.

Schermafbeelding 2021-02-04 om 14.16.56
Schermafbeelding 2021-02-04 om 14.16.561168×784 52 KB

5

Hm it doesn’t change the flickering on safari for me and neither on my colleague’s computer …
Did you open it on Safari ?

6

What exactly do you mean with flickering?

7

Like the gif I put in my second message

Map