Styles problem with Safari browser, Any ideas to fix?

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

**Problem with Safari browser screenshot **

Can I Use shows varying support for Safari:

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

1 Like

Thank you for your reply. Unfortunately,

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

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.