Bug Tracker

Modify ↓

Ticket #10405 (closed bug: wontfix)

Opened 20 months ago

Last modified 20 months ago

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:
Blocking: Blocked by:

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

comment:1 Changed 20 months 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 20 months 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 20 months ago by rwaldron

  • Status changed from new to closed
  • Resolution set to wontfix
  • Component changed from unfiled to misc

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 20 months 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 20 months 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.

Please follow the  bug reporting guidlines and use  jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.

View ↑

Add a comment

Modify Ticket

Action
as closed
Author


E-mail address and user name can be saved in the Preferences.

Attachments ↑
 
Note: See TracTickets for help on using tickets.