diff --git a/CHANGELOG.md b/CHANGELOG.md index 98cf870b4..c3c922f77 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ * Tangletrees can now be coloured by genotype (previously such a colouring would only work for the LHS tree). This requires the genome annotation (in the dataset JSON) to be identical across both datasets. This can be especially useful when comparing trees generated from the same sequences or a similar set of sequences in order to understand the differences in tree structure. ([#1785](https://github.com/nextstrain/auspice/pull/1783)) * Bugfix: The legend entries shown for a tangletree may not have shown values only observed in the RHS tree when the dataset was first loaded. ([#1785](https://github.com/nextstrain/auspice/pull/1783)) +* Bugfix: Multiple trees ("tanglegrams") now render correctly in Safari. ([#1786](https://github.com/nextstrain/auspice/pull/1786)) ## version 2.54.1 - 2024/06/10 diff --git a/src/components/tree/phyloTree/renderers.js b/src/components/tree/phyloTree/renderers.js index c1500c6c7..c955cc978 100644 --- a/src/components/tree/phyloTree/renderers.js +++ b/src/components/tree/phyloTree/renderers.js @@ -374,7 +374,11 @@ export const branchStrokeForHover = function branchStrokeForHover(d) { * in practice, elements (or portions of elements) render outside this. */ export const setClipMask = function setClipMask() { - const [xMin, xMax, yMin, yMax] = [...this.xScale.range(), ...this.yScale.range()]; + const [yMin, yMax] = this.yScale.range(); + // for the RHS tree (if there is one) ensure that xMin < xMax, else width<0 which some + // browsers don't like. See + let [xMin, xMax] = this.xScale.range(); + if (parseInt(xMin, 10)>parseInt(xMax, 10)) [xMin, xMax] = [xMax, xMin]; const x0 = xMin - 5; const width = xMax - xMin + 20; // RHS overflow is not problematic const y0 = yMin - 15; // some overflow at top is ok