Zooming issue in on inverted chart

[leonardomathon]

Expected behaviour

I am using an inverted chart to create a timeline. Zooming is enabled and works most of the time, however when want to zoom and place my cursor on the line of the first category of the y-axis (actually the x-axis since its inverted), and drag to zoom the blue zoom effect is shown but the graph does not zoom in.

This bug occurs when you start zooming in between the red lines.

The GIF below shows the problem. The first two zooms work, the third zoom shows the problem. Another strange thing is that when we zoom in normally, the zoom button shows. But if you then zoom in by starting at the first category, the zoom button disappears.

Actual behaviour

Zoom should work as expected.

Live demo with steps to reproduce

See JS fiddle below. Note that I've removed my data, and behavior stays the same.
https://jsfiddle.net/leonardomathon/58ojyrqm/3/

Product version

Latest version of Highcharts from CDN

Affected browser(s)

All major browsers, latest versions (Chrome, Edge, Firefox)

[bm64]

Hello @leonardomathon and thanks for reporting the issue. It looks like its broken since v10.3.0.

Internal note:
Bisected to: eafc087

[pawelfus]

Workaround:

Demo: https://jsfiddle.net/BlackLabel/n5jv4kq3/
Plugin:

Highcharts.addEvent(Highcharts.Chart, 'afterIsInsidePlot', function(event) {

  const {
    inverted,
    plotBox,
    plotLeft,
    plotTop,
    scrollablePlotBox
  } = this;

  const options = event.options;

  let scrollLeft = 0,
    scrollTop = 0;

  if (options.visiblePlotOnly && this.scrollingContainer) {
    ({
      scrollLeft,
      scrollTop
    } = this.scrollingContainer);
  }

  const series = options.series,
    box = (options.visiblePlotOnly && scrollablePlotBox) || plotBox,
    x = event.x,
    y = event.y,
    e = event;

  event.isInsidePlot = true;

  if (!options.ignoreX) {
    const xAxis = (
      series &&
      (inverted && !this.polar ? series.yAxis : series.xAxis)
    ) || {
      pos: plotLeft,
      len: Infinity
    };

    const chartX = options.paneCoordinates ?
      xAxis.pos + x : plotLeft + x;

    if (!(
        chartX >= Math.max(
          scrollLeft + plotLeft,
          xAxis.pos
        ) &&
        chartX <= Math.min(
          scrollLeft + plotLeft + box.width,
          xAxis.pos + xAxis.len
        )
      )) {
      e.isInsidePlot = false;
    }
  }

  if (!options.ignoreY && e.isInsidePlot) {
    const yAxis = (
      !inverted && options.axis && !options.axis.isXAxis && options.axis
    ) || (
      series && (inverted ? series.xAxis : series.yAxis)
    ) || {
      pos: plotTop,
      len: Infinity
    };

    const chartY = options.paneCoordinates ?
      yAxis.pos + y : plotTop + y;

    if (!(
        chartY >= Math.max(
          scrollTop + plotTop,
          yAxis.pos
        ) &&
        chartY <= Math.min(
          scrollTop + plotTop + box.height,
          yAxis.pos + yAxis.len
        )
      )) {
      e.isInsidePlot = false;
    }
  }

  return e;
});

---

Internal note:
We compare plotTop with yAxis.pos, which shouldn't happen in an inverted chart.