title: Why is Safari on IPhone XS Max applying phone linking to values inside data attributes?
body: <p>We have a html/javascript widget that our clients can add to their sites webpages by adding a  tag in the head of the page, and adding an element in the body the page.</p>
  
  <pre><code>&lt;a href="#" class="ourwidgetclass" data-product-id="1234567890" /&gt;
  </code></pre>
  
  <p>When the page loads, our javascript finds all the elements on that page with that class, grabs the productId from that data attribute, does a webservice call to our API and renders a little product visualisation for the supplied product Id.</p>
  
  <p>Yesterday we received a bug report that this html is rendering as follows</p>
  
  <pre><code>&lt;a href="#" class="ourwidgetclass" data-product-id="&lt;a href="tel:1234567890"&gt;1234567890&lt;/a&gt;" /&gt;
  </code></pre>
  
  <p>This is:</p>
  
  <ul>
  <li>localised to safari on iOS</li>
  <li>only occuring on the IPhone XS Max - it's not occuring on any other iphone device</li>
  </ul>
  
  <p>I've looked around on SO and the usual recommendation of adding the following meta tag isn't an option for us as we can (or shouldn't) modify the meta tags on the site of teh client that's rendering our widget. ( <code>&lt;meta name="format-detection" content="telephone=no"&gt;</code> )</p>
  
  <p>So aside from writing some horrid javascript/regex to try and identifiy when safari cocks up our data like this... has anyone got any ideas why this might be happening in such a localized fashion.</p>