Bug: zorder not working on overlaying subplots

[Farkites]

Description:

On cartesian SVG plots the zorder is not followed by overlaying subplots. Only the traces within the same subplot are ordered by zorder. Since overlaying axes create additional subplots (i.e xy, xy2) the traces in the main subplot are always below the overlaying subplot.

Reproduce this bug:

plotly.js version 2.29.1

Code

var data = [
      {
        "line": {
          "width": 5
        },
        "mode": "lines",
        "name": "x1y1",
        "x": [
          "A",
          "B",
          "C",
          "D"
        ],
        "y": [
          50,
          70,
          90,
          35
        ],
        "type": "scatter",
        "zorder": 1
      },
      {

        "line": {
          "width": 5
        },
        "mode": "lines",
        "name": "x2y2",
        "x": [
          "A",
          "B",
          "C",
          "D"
        ],
        "xaxis": "x2",
        "y": [
          100,
          200,
          150,
          190
        ],
        "yaxis": "y2",
        "type": "scatter",
        "zorder": 2
      },
      {

        "line": {
          "width": 5
        },
        "mode": "lines",
        "name": "x2y1",
        "x": [
          "A",
          "B",
          "C",
          "D"
        ],
        "xaxis": "x2",
        "y": [
          50,
          70,
          90,
          35
        ],
        "type": "scatter",
        "zorder": 3
      },
      {

        "line": {
          "width": 5
        },
        "mode": "lines",
        "name": "x1y2",
        "x": [
          "A",
          "B",
          "C",
          "D"
        ],
        "y": [
          100,
          200,
          150,
          190
        ],
        "yaxis": "y2",
        "type": "scatter",
        "zorder": 4
      }
    ];
var layout = {
      "yaxis": {
        "side": "right",
        "ticklabelposition": "inside top"
      },
      "xaxis2": {
        "overlaying": "x",
        "side": "top"
      },
      "yaxis2": {
        "overlaying": "y",
        "side": "left",
        "ticklabelposition": "inside top"
      }
    };

Plotly.newPlot('myDiv', data, layout);

Output

The traces are in the order (from below to above): x1y1 (blue), x1y2 (red), x2y1 (green), x2y2 (orange).
They follow alphabetical order by subplot name

Expected output:

The traces should be in the order (from below to above): x1y1 (blue), x2y2 (orange), x2y1 (green), x1y2 (red).

[archmoj]

Closed by #7032.