Highstock Navigator plugin doesn't render in firefox

Question

I'm having an issue with a little plugin I wrote for the Highstock Navigator. It's meant to just style the navigator outside the bounds of what their built in options allow. The plugin looks like this:

(function (H) {
    H.wrap(H.Scroller.prototype, 'init', function (proceed) {
      proceed.apply(this, Array.prototype.slice.call(arguments, 1));
      //console.log("drawing scroller: ", this);
    });
    H.wrap(H.Scroller.prototype, 'drawHandle', function (proceed) {
      //console.log("drawing handle: ", this);
      proceed.apply(this, Array.prototype.slice.call(arguments, 1));


    H.each(this.handles, function (handle,index) {
      var element = handle.element

      var offsetX = -8
      var centerPoint = 0;
      if(index == 0) {
                                                    ///topleft////     ///topright////       ///middleright////     ///bottomright////     ///bottomleft///      ////middleleft
             $(element).html('<path fill="#333333" d="M '+(7+offsetX)+' 0 L '+(15+offsetX)+' 0 L '+(8+offsetX)+' 9.5 L'+(15+offsetX)+' 20 L '+(7+offsetX)+' 20 L'+(0+offsetX)+' 9.5"  stroke-width="0"></path>')                                                    
            // element.innerHTML = '<polygon fill="#333333" points="'+(7+offsetX)+',0    '+(15+offsetX)+',0     '+(8+offsetX)+',9.5    '+(15+offsetX)+',20   '+(7+offsetX)+',20     '+(0+offsetX)+',9.5"/>'
      }
      else {

             offsetX = -14                                                  ///topleft////     ///topright////       ///middleright////     ///bottomright////     ///bottomleft///      ////middleleft
             $(element).html('<path fill="#333333" d="M '+(7+offsetX)+' 0 L '+(15+offsetX)+' 0 L '+(22+offsetX)+' 9.5 L '+(15+offsetX)+' 20 L '+(7+offsetX)+' 20 L '+(14+offsetX)+' 9.5" stroke-width="0"></path>')
             //element.innerHTML = '<polygon fill="#333333" points="'+(7+offsetX)+',0    '+(15+offsetX)+',0     '+(22+offsetX)+',9.5    '+(15+offsetX)+',20   '+(7+offsetX)+',20     '+(14+offsetX)+',9.5"/>'

      }
      $(element).bind('mouseover',function() {
        $(this).find('path').attr('fill', '#50504e');     
      }) 
      $(element).bind('mouseout',function() {
        $(this).find('path').attr('fill', '#333333');     
      })
      $(element).attr('transform', "translate("+handle.translateX+','+(handle.translateY-2)+')')
      //$(element).addClass('custom_scroll_handle');
  })
});
}(Highcharts));

This plugin works fine in Chrome, it draws the navigator as a solid box with two arrows for the left and right handles. It looks like this:

Custom Highstock Navigator in Chrome

However in Firefox, the same svg block fails to render. I've verified that the actual svg looks identical in the code inspector, and there are no apparent style additions in firefox that would cause it not to display. I've also tried copying and pasting the default handle svg into the plugin to see if the issue was with the way the svg coordinates were set up, but even the default handle svg fails when drawn by the plugin in firefox. When i hover over the left or right handle path element in firefox it shows it as being positioned in the upper right corner of the svg stage with a height and width of 0. Here is a picture of the same page in firefox:

enter image description here

Does anyone have any insight as to what might be causing it not to appear?

score 0 · Answer 1 · edited May 23 '17 at 12:27

Ok I found the problem in case anyone else runs into this issue.

The issue was with the way the svg was being appended by the plugin. Because i was using either innerHTML or jquery.html() to append the content Firefox was apparently treating it like an unstyled custom html tag rather than an svg element. Using the parseSVG method with appendChild from this answer jquery's append not working with svg element? fixed the issue in firefox.

Here is the working plugin:

(function (H) {
H.wrap(H.Scroller.prototype, 'init', function (proceed) {
  proceed.apply(this, Array.prototype.slice.call(arguments, 1));
  //console.log("drawing scroller: ", this);
});
H.wrap(H.Scroller.prototype, 'drawHandle', function (proceed) {
  //console.log("drawing handle: ", this);
  proceed.apply(this, Array.prototype.slice.call(arguments, 1));


  H.each(this.handles, function (handle,index) {
      var element = handle.element

      var offsetX = -8
      var centerPoint = 0;
      if(index == 0) {
          element.innerHTML = ''                               ///topleft////      ///topright////   ///middleright////  ///bottomright////    ///bottomleft///  ////middleleft
             element.appendChild(parseSVG('<path fill="#333333" d="M '+(7+offsetX)+' 0 L '+(15+offsetX)+' 0 L '+(8+offsetX)+' 10 L'+(15+offsetX)+' 20 L '+(7+offsetX)+' 20 L'+(0+offsetX)+' 10"  stroke-width="0"></path>'))                                                    


      }
      else {
            element.innerHTML = ''
             offsetX = -14                              ///topleft////     ///topright////       ///middleright////     ///bottomright////     ///bottomleft///      ////middleleft
            element.appendChild(parseSVG('<path fill="#333333" d="M '+(7+offsetX)+' 0 L '+(15+offsetX)+' 0 L '+(22+offsetX)+' 10 L '+(15+offsetX)+' 20 L '+(7+offsetX)+' 20 L '+(14+offsetX)+' 10" stroke-width="0"></path>'))

      }
      $(element).bind('mouseover',function() {
        $(this).find('path').attr('fill', '#50504e');     
      }) 
      $(element).bind('mouseout',function() {
        $(this).find('path').attr('fill', '#333333');     
      })
      $(element).attr('transform', "translate("+handle.translateX+','+(handle.translateY-2)+')')
  })
});
}(Highcharts));

Highstock Navigator plugin doesn't render in firefox

1 Answers1