fix: fixes firefox scroll-linked effect issue

.github/workflows/branch.yaml

@@ -3,7 +3,10 @@ name: Run tests (branch)
 on:
   push:
     branches-ignore:
-      - 'master'
+      - master
+      - alpha
+      - beta
+      - next
     tags-ignore:
       - 'v*'
 

src/diff-view.js

@@ -290,11 +290,6 @@ CodeMirrorDiffView.prototype.bind = function(container) {
 		className: container.className
 	};
 	const el = dom.getMergelyContainer({ clazz: container.className });
-	// const found = document.getElementById(container.id);
-	// if (!found) {
-	// 	console.error(`Failed to find mergely: #${container.id}`);
-	// 	return;
-	// }
 	const computedStyle = window.getComputedStyle(container);
 	if (!computedStyle.height || computedStyle.height === '0px') {
 		throw new Error(
@@ -440,7 +435,10 @@ CodeMirrorDiffView.prototype.bind = function(container) {
 				trace('event#lhs-scroll');
 			}
 		}
-		this._scrolling({ side: 'lhs' });
+		// firefox scroll-linked effect render issue
+		setTimeout(() => {
+			this._scrolling({ side: 'lhs' });
+		}, 1);
 	});
 	this.editor.rhs.on('change', (instance, ev) => {
 		if (this.settings._debug) {
@@ -459,7 +457,10 @@ CodeMirrorDiffView.prototype.bind = function(container) {
 				trace('event#rhs-scroll');
 			}
 		}
-		this._scrolling({ side: 'rhs' });
+		// firefox scroll-linked effect render issue
+		setTimeout(() => {
+			this._scrolling({ side: 'rhs' });
+		}, 1);
 	});
 
 	// resize event handeler
@@ -634,7 +635,10 @@ CodeMirrorDiffView.prototype._scrolling = function({ side }) {
 	const scroller = this.editor[side].getScrollerElement();
 	const { top } = scroller.getBoundingClientRect();
 	let height;
-	if (true || this.midway == undefined) {
+	if (scroller.offsetParent === null) {
+		return;
+	}
+	if (this.midway == undefined) {
 		height = scroller.clientHeight
 			- (scroller.offsetHeight - scroller.offsetParent.offsetHeight);
 		this.midway = (height / 2.0 + top).toFixed(2);

src/dom.js

@@ -67,7 +67,7 @@ function getColors(el) {
 function getMergelyContainer({ clazz = '' }) {
 	const classes = [ 'mergely-editor', clazz ]
 	return htmlToElement(`\
-<div class="${classes.join(' ')}" style="display:flex;height:100%;position:relative;"></div>`);
+<div class="${classes.join(' ')}" style="display:flex;height:100%;position:relative;overflow:hidden;"></div>`);
 }
 
 function getMarginTemplate({ id }) {

src/mergely.js

@@ -186,7 +186,7 @@ class Mergely {
 
 	diff() {
 		if (this._options._debug) {
-			trace('api#diff', side);
+			trace('api#diff');
 		}
 		const lhs_text = this.get('lhs');
 		const rhs_text = this.get('rhs');