Bug Tracker

Opened 5 years ago

Closed 5 years ago

Last modified 5 years ago

#10405 closed bug (wontfix)

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.

Change History (5)

comment:1 Changed 5 years ago by asgeo1

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>

comment:2 Changed 5 years ago by asgeo1

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.

comment:3 Changed 5 years ago by rwaldron

  • Component changed from unfiled to misc
  • Resolution set to wontfix
  • Status changed from new to 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

comment:4 Changed 5 years ago by rwaldron

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

comment:5 Changed 5 years ago by asgeo1

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.

Note: See TracTickets for help on using tickets.