title: Why a href link in an svg is working on Firefox (on Ubuntu) but not on Safari on IOS
body: <p>Here is a MWE.</p>
  <p>There are 2 links (at the bottom) to the same reference (at the top).
  One link not in a svg, the other one in a svg.</p>
  <p>I'm expecting both of them to have the same effect.
  They appear to do so on my Firefox.
  But on an IPhone, the svg link doesn't do anything. Why?</p>
  <p>I tried some tricks found on the internet, but nothing worked.
  I have the feeling that Safari is lost, and that I could tell it more to help it.
  But what can I do?
  Is there some simple workaround?
  And I would expect this workaround to work even if the html page is local.</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot; /&gt;
      &lt;title&gt;my title&lt;/title&gt;
  &lt;/head&gt;
  &lt;div id=&quot;my_ref&quot;&gt;
      my reference
  &lt;/div&gt;
  
  ZZZZ
  &lt;br&gt;
  ZZZZ
  &lt;br&gt;
  ZZZZ
  &lt;br&gt;
  ZZZZ
  &lt;br&gt;
  ZZZZ
  &lt;br&gt;
  ZZZZ
  &lt;br&gt;
  ZZZZ
  &lt;br&gt;
  ZZZZ
  &lt;br&gt;
  ZZZZ
  &lt;br&gt;
  ZZZZ
  &lt;br&gt;
  ZZZZ
  &lt;br&gt;
  ZZZZ
  &lt;br&gt;
  ZZZZ
  &lt;br&gt;
  ZZZZ
  &lt;br&gt;
  ZZZZ
  &lt;br&gt;
  ZZZZ
  &lt;br&gt;
  ZZZZ
  &lt;br&gt;
  ZZZZ
  &lt;br&gt;
  ZZZZ
  &lt;br&gt;
  ZZZZ
  &lt;br&gt;
  ZZZZ
  &lt;br&gt;
  ZZZZ
  &lt;br&gt;
  ZZZZ
  &lt;br&gt;
  ZZZZ
  &lt;br&gt;
  ZZZZ
  &lt;br&gt;
  ZZZZ
  &lt;br&gt;
  ZZZZ
  &lt;br&gt;
  ZZZZ
  &lt;br&gt;
  ZZZZ
  &lt;br&gt;
  ZZZZ
  &lt;br&gt;
  ZZZZ
  &lt;br&gt;
  ZZZZ
  &lt;br&gt;
  ZZZZ
  &lt;br&gt;
  ZZZZ
  &lt;br&gt;
  ZZZZ
  &lt;br&gt;
  ZZZZ
  &lt;br&gt;
  ZZZZ
  &lt;br&gt;
  ZZZZ
  &lt;br&gt;
  ZZZZ
  &lt;br&gt;
  ZZZZ
  &lt;br&gt;
  ZZZZ
  &lt;br&gt;
  
  &lt;a href=&quot;#my_ref&quot;&gt;link to my reference outside of svg&lt;/a&gt;
  
  &lt;br&gt;
  
  &lt;svg viewBox=&quot;0 0 500 500&quot; width=&quot;500&quot; height=&quot;500&quot;&gt;
    &lt;rect x=&quot;0&quot; y=&quot;0&quot; width=&quot;500&quot; height=&quot;500&quot; style=&quot;fill:yellow&quot;/&gt;
    &lt;a href=&quot;#my_ref&quot;&gt; &lt;text x=&quot;10%&quot; y=&quot;50%&quot;&gt;(link to my reference inside svg)&lt;/text&gt;&lt;/a&gt;
  &lt;/svg&gt;
  
  
  &lt;/html&gt;
  </code></pre>
  <p>EDIT 1:
  My MWE was too minimal!
  The suggested solution works for my MWE, but not for my real web page.</p>
  <p>I'm putting a second MWE, closer to my real web page (something like the Wordle page, with a menu, and some modal pages for help, statistics, etc.).</p>
  <p>How can I make this MWE work on Safari ?</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot; /&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot; /&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
      &lt;title&gt;my title&lt;/title&gt;
      
      &lt;style&gt; 
      
          .modal-window {
          position: fixed;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          opacity: 0;
          pointer-events: none;
          }
          
          .modal-window:target {
          opacity: 1;
          pointer-events: auto;
          }
          
          .modal-window &gt; div {
          max-width: 95vw;
          max-width: 600px;
          max-height: 85vh;
          position: relative;
          margin: 10% auto;
          padding: 2rem;
          background: lightgray;
          }
          
          
          .modal-close {
          color: red;
          line-height: 50px;
          font-size: 80%;
          position: absolute;
          right: 0;
          text-align: center;
          top: 0;
          width: 70px;
          text-decoration: none;
          }
          
          
          body {
          font-size: 32px;
          height: 100vh;
          text-align: center;
          margin: 0;
          padding: 0;
          }
          
          .for_svg
          {
              max-height: 50vh;
          }
      
      &lt;/style&gt;
      
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id=&quot;open-modal&quot; class=&quot;modal-window&quot;&gt;
          &lt;div&gt;
              &lt;a href=&quot;#tftyjfjfjhf&quot; title=&quot;Close&quot; class=&quot;modal-close&quot;&gt;&amp;times;&lt;/a&gt;
              MODAL INFO
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;a href=&quot;#open-modal&quot;&gt;link outside svg&lt;/a&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;svg class=&quot;for_svg&quot; viewBox=&quot;0 0 400 400&quot; &gt;
              &lt;rect x=&quot;0&quot; y=&quot;0&quot; width=&quot;400&quot; height=&quot;400&quot; style=&quot;fill:yellow&quot;/&gt;
              &lt;a href=&quot;#open-modal&quot;&gt;&lt;text x=&quot;10%&quot; y=&quot;50%&quot;&gt;link inside svg&lt;/text&gt;&lt;/a&gt;
          &lt;/svg&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>