title: Positioning svg x/y coordinates with css not working with iOS devices?
body: <p>According to the W3C styling guide for css/svg (<a href="https://www.w3.org/TR/SVG2/styling.html" rel="nofollow">https://www.w3.org/TR/SVG2/styling.html</a>) I should be able to position certain svg elements within css using the x/y attributes.</p>
  
  <p>This works with chrome + the Samsung Galaxy S6 (not tried other models/browsers). However, this doesn't work in iOS and some window/htc devices that I've tried.</p>
  
  <p>Here is the code I'm using (with the help of d3.js);</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
  &lt;meta name="viewport" content="width=device-width"&gt;
  &lt;meta name="viewport" content="initial-scale=1, maximum-scale=1.5"&gt;
  &lt;script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"&gt;&lt;/script&gt;
  
      &lt;style&gt;
          @media handheld,
          screen and (max-width: 425px) {
              foreignObject {
                  x: 30;
                  y: 30;
              }
          }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;script&gt;
          d3.selectAll("body")
              .append("svg")
              .append("foreignObject")
              .attr("width", 30)
              .attr("height", 30)
              .attr('x', 0)
              .attr('y', 0)
              .html("hello")
      &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is a <a href="http://plnkr.co/edit/6hkObXeq2gMrY1dxOgK7?p=preview" rel="nofollow">plnk</a> of the code also.</p>
  
  <p>I was wondering if there was any kind of workaround for this? or if someone could recommend another way of adding responsive breakpoints for the x/y?</p>
  
  <p>Thanks</p>