jQuery offset() does not work in Safari / Chrome iOS

Question

The following code loops through an array of images and creates them based on the position of Highcharts marker ( a text that is associated with a point on a chart ). It works great in Chrome, FF, IE on desktop but does not work in Safar both Desktop or iOS and even Chrome iOS does not show the images.

The error I am getting is : main.js:453 - TypeError: 'undefined' is not an object (evaluating 'markerOffset.left')

$.each(value, function(k, v){

    var z = i;

    // Store the current marker 
    var marker = $('text').filter(function() { if($(this).html() === k) { return $(this) } });

    // Get the markers offset
    var markerOffset = marker.offset();

    // If in Firefox, set the marker height to 13 px
    if(marker.height() == 0){

        markerHeight = 13;

    }
    else{

        markerHeight = marker.height();

    }

    // Get the image dimensions
    // Create new image object and get the width and height
    // The image has to be downloaded first
    var img = new Image();

    // Set the image location
    img.src = v.img;

    // When the image is downloaded, you can get the dimensions
    img.onload = function(){

        var imgHeight = img.height;
        var imgDivHeight = img.height;
        var imgWidth = img.width;

        // If the image Width is more than 90px, resize it
        if(imgWidth > 50){

            imgDivHeight = imgHeight / (imgWidth / 50);
            imgHeight = (imgHeight / (imgWidth / 50)) + 5;
            imgWidth = 50;

        }

        // Create the offset values based on the image sizes
        **// THIS IS LINE 453**
        var imgLeft = markerOffset.left - ((imgWidth - marker[0].getComputedTextLength()) / 2);
        var imgTop = markerOffset.top - (imgHeight - (markerHeight / 4));

        // Create an element for each value.img and make it position absolute and set the offset of the marker
        $('.charts-inner').prepend('<div class="series-data series-picture-wrapper ' + hidden + ' image-on-chart" data-id="' + k + '" data-series="' + key + '"  data-position-top="' + (imgTop - $('.app-ui-top').height() - (markerHeight)) + '" data-position-left="' + (imgLeft - ($('.app-ui-menu').width() + 3)) + '" data-hidden="' + hiddenAttr + '" style="z-index: ' + (5555 + z) + '; top:' + (imgTop - $('.app-ui-top').height() - (markerHeight)) + 'px; left:' + (imgLeft - ($('.app-ui-menu').width() + 3)) + 'px; width:' + imgWidth + 'px; height:' + imgDivHeight + 'px"><img src="' + v.img + '" style="width:' + imgWidth + 'px" /><div class="app-tooltip-stock nodisplay">' + v.tooltip + '</div></div>');

    }

})

Answer 1

Right, so the problem was not the OFFSET but that $('text') is an SVG element and in Safari you cant get its content by html().

I changed the filter part to

var marker = $('text').filter(function() {

    if($(this)[0].textContent === k) { return $(this) } 

});

and it is working now...