html – CSS :hover when tapping SVG ingredient not working in Safari

<?xml model="1.0" encoding="UTF-8"?>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 306.12 409.2">
  <defs>
    <fashion sort="textual content/css">
      @import url('https://fonts.googleapis.com/css2?household=Poppins:wght@500;600');

      .font-md {
        font-family: 'Poppins';
        font-size: 10px;
        font-weight: 500;
      }

      :root {
        --yellow: #f6b034;
      }

      .coaching {
        fill: var(--yellow);
      }

      .sub-menu {
        opacity: 0;
        visibility: hidden;
        top: 0;
      }

      .sub-menu > g {
        opacity: 0;
        -webkit-transition: opacity 2s ease-in-out;
      }

      .has-dropdown:hover + .sub-menu,
      .has-dropdown:hover + .sub-menu > g {
        opacity: 1;
        visibility: seen;
        top: auto;
        pointer-events: visiblePainted;
        remodel: unset;
      }

      .has-dropdown:hover {
        opacity: 0;
        visibility: hidden;
        top: 0;
      }

      .sub-menu:hover {
        opacity: 1;
        visibility: seen;
        top: auto;
        pointer-events: none;
      }

      .sub-menu:hover > g {
        opacity: 1;
      }
    </fashion>
  </defs>
  
  <g id="coaching" class="has-dropdown">
    <path class="coaching" d="m0,256c0-27.61,22.39-50,50-50,27.61,0,50,22.38,50,49.99,0-.21.02-.42.02-.63v29.39c0,11.06,8.45,20.15,19.25,21.15.02,0,.04.09,0,.09-.04,0-62.38,0-69.27,0,0,0,0,0,0,0s0,0,0,0h-.62c.1,0,.21,0,.31,0C22.22,305.82,0,283.51,0,256Z"/>
    <textual content class="font-md" remodel="translate(31 285)">Coaching</textual content>
  </g>
  <g id="training-sub-menu" class="sub-menu">
    <path class="coaching" d="m0,256c0-27.61,22.39-50,50-50,27.61,0,50,22.38,50,49.99,0-.21.02-.42.02-.63v29.39c0,11.06,8.45,20.15,19.25,21.15.02,0,.04.09,0,.09-.04,0-62.38,0-69.27,0,0,0,0,0,0,0s0,0,0,0h-.62c.1,0,.21,0,.31,0C22.22,305.82,0,283.51,0,256Z"/>
    <g id="textual content">
        <textual content class="font-md sub-menu-item" remodel="translate(31 285)">
            <a href="https://google.com" goal="_parent">Google</a>  
        </textual content>
        <textual content class="font-md sub-menu-item" remodel="translate(31 265)">
            <a href="https://google.com" goal="_parent">Google</a>  
        </textual content>
        <textual content class="font-md sub-menu-item" remodel="translate(31 245)">
            <a href="https://google.com" goal="_parent">Google</a>  
        </textual content>
    </g>
  </g>
</svg>