Styles problem with Safari browser, Any ideas to fix?

1

I’m working with angular 4 projects where inserted inline SVG document and I’ve put some styles for path elements, it has a class name is country each. However, the styles work fine with Chrome, Firefox, and Edge but NOT in Safari browser.
How should I style correctly that works for all browsers? If anyone has an idea I’d like to ask you to share your knowledge any links that would be greatly appreciated!

Current Style for Svg path class .country

.country {
  stroke: #000000;
  stroke-width: 0.25;
  fill-opacity: 0.4;
  transition: fill 0.2s ease-out;

  &:hover {
    fill: #00ff00;
  }
}

.country:focus {
  stroke: #ffffff;
  stroke-width: 0.25;
  fill: #00ff00;
  outline: none;
}

.test-country {
  fill: #009900;
}

Chrome screenshot and it should be display the same for other browsers as well

chrome
chrome1440×922 295 KB
chrome-shot-styles
chrome-shot-styles1232×1488 255 KB

**Problem with Safari browser screenshot **

safari-shot
safari-shot1194×674 629 KB
safari-shot-styles
safari-shot-styles866×1638 163 KB

2

Can I Use shows varying support for Safari:

https://caniuse.com/#search=svg

Try adding a -webkit- prefix, or you may need to see if there are any Safari fall backs you can use.

1 Like
3

Thank you for your reply. Unfortunately,

I tried already that did not work though appreciated with your link.

4

See, i also have the same issue. I cant put styles for path elements. I use safari browser on my iOS. I discussed this matter with my senior and he told that safari can’t verify the identity of the website. But i am not sure about it.