The hidden layer trouble of the mapper

I was implementing the right-click menus for the nodes in the tree-container, when I noticed that they act weird in Firefox. I cross checked against Chrome and it was fine. When I tried to inspect-element in the browser, it pointed to a foreignObject, a piece of html where I hid the input trigger.

Fig 1

Each container was set to have an html input of type, file that would be triggered during file loading. The file loading was meant to be from a right-click option (Fig. 1), therefore, had to be hidden, and I needed it to be related to the specific container.



At the time of the implementation, the quickest solution was to append it to the container svg group while display:none-ing. So I simply appended a foreignObject with the input option to each tree-container. The mistake I made was assuming that the browser would not see the display-none elements.

var fo = parent.append("foreignObject").attr("x", 0).attr("y", 0).attr("height", 100).attr("width", 100);
var input = fo.append("xhtml:input")
            .attr("type", "file")
            .classed("schema-select", true)
            .attr("name", "input-select[]")
            .attr("id", this.id + "-schema-select")
            .attr("accept", "application/json")
            .style("display", "none")
            .on("change", function () {
                self.fileChange();
            });

The troubles started long after that, when I was implementing the right click menus for each node. The menus worked fine with the nodes positioned lower, but did not work or partially worked with the upper nodes.

With the help of a member of the UX/UI team, the cause was found - the foreignObject. I had used display none only on the input and set considerably large dimensions, which practically covered the nodes, completely or partially.

Since, Firefox and Chrome treat the elements differently, the visibility was different.

The solution was to set display:none to the foreignObject. As precautions, I also made use of the z-index and reduced the dimensions of the foreignObject.