Bug Tracker

#10405 closed bug (wontfix)

Opened October 02, 2011 09:29PM UTC

Closed October 02, 2011 09:53PM UTC

Last modified October 03, 2011 09:29PM UTC

offset() of SVG elements on mobile Safari not correct

Reported by: asgeo1 Owned by:
Priority: undecided Milestone: None
Component: misc Version: 1.6.4
Keywords: Cc:
Blocked by: Blocking:
Description

I have found that in mobile safari, offset() always seems to return {left:0, top:0} on SVG elements, IF the svg document was loaded into the DOM via adoptNode.

Other browsers seem fine. I.e. Firefox, Chrome, desktop Safari, offset() returns the expected value.

I suspect that this is probably a bug in mobile Safari.

NOTE: the reason to load the SVG into the DOM via adoptNode, is because mobile Safari does not have great support for inline SVG. This is the same approach the jQuery SVG plugin uses.

I have attached a test case that demonstrates the issue.

Attachments (0)
Change History (5)

Changed October 02, 2011 09:31PM UTC by asgeo1 comment:1

Test Case:

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Test jQuery Offset in Mobile Safari</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  <style type="text/css">
      body { padding:0; margin:0; height:100%; width:100%; }
  </style>
  <script type="text/javascript">
      $(document).ready(function(){
          var svg = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%"><circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/></svg>';

          var chart = document.adoptNode($('svg', $.parseXML(svg)).get(0));
          $('body').html(chart);

          var offset = $('circle').offset();
          console.log('left:' + offset.left + ', top:' + offset.top);
      });
  </script>
</head>
<body>
</body>
</html>

Changed October 02, 2011 09:38PM UTC by asgeo1 comment:2

FWIW, in the HTML5 mobile applications I'm writing, having this working is actually a big deal. Part of what I'm trying to do is overlay HTML elements (jQuery UI elements, or other HTML elements) on top of an inline SVG image.

Having offset() to calculate the correct screen location of the SVG elements is just so handy. I'm not sure how else to do this - you can't just take the CY or CX position of the circle (for example) as the SVG may have transformations (pan / zoom) applied.

Changed October 02, 2011 09:53PM UTC by rwaldron comment:3

component: unfiled → misc
resolution: → wontfix
status: new → closed

Unfortunately, SVG issues are out of jQuery's scope, as we've noted in this public document: http://docs.jquery.com/Won't_Fix

Changed October 02, 2011 10:04PM UTC by rwaldron comment:4

Additionally, in the same StackOverflow post that you've already added to, I believe the answer was given here: http://stackoverflow.com/questions/4504942/mobile-safari-svg-problem/4628297#4628297

Changed October 03, 2011 09:29PM UTC by asgeo1 comment:5

I did see that post on SO. I tried an XHTML doctype, but I still had the problem.

But I've just downloaded iOS 5 beta, and it seems to be working OK. So this should be fixed in the next release of mobile Safari, which is good enough for me.