Fixed both timescale edges make lockVisibleTimeRangeOnResize turn wrong

[thanhlmm]

Lightweight Charts Version: 3.5.0

Steps/code to reproduce:

var chart = createChart(container, {
  leftPriceScale: {
    visible: true,
    borderColor: "#EFF2F5",
    drawTicks: false
  },
  timeScale: {
    borderVisible: false,
    fixLeftEdge: true,
    fixRightEdge: true,
    timeVisible: true,
    lockVisibleTimeRangeOnResize: true
  },
  layout: {
    backgroundColor: "#ffffff",
    textColor: "#333"
  },
});

var series = chart.addLineSeries({
  color: "green",
  lineWidth: 2,
  priceScaleId: "left"
});

series.setData(
  data.map((row) => ({
    time: row.time,
    value: row.value * 10
  }))
);

chart.timeScale().subscribeVisibleLogicalRangeChange((range) => {
  console.log(range);
});

chart.timeScale().fitContent();

Actual behavior:
When run chart.timeScale().fitContent(); => The chart change visible range 2 times, the first time is {from: 0, to: 299} and the last one is {from: 0, to: 297.5623003194888}

It happend due to: fitContent => visibleRange change => after change visibleRange => width of axis get updated => visibleRange change again which not cover the full range
Expected behavior:
The final visibleRange should still show the full chart, which is {from: 0, to: 299}

Screenshots:

CodeSandbox/JSFiddle/etc link:
https://codesandbox.io/s/fitcontent-with-fixed-left-and-right-50n1k?file=/src/index.js:15599-16542

[thanhlmm]

More information

More info: If you look at the last log, the logical range is changed to {from: 0, to: 294.36082474226805}. The expected behavivor should keep it to {from: 0, to: 299}

[timocov]

Yeah, fair enough. Thanks for your contribution!