fix(helpers): tolerate sub-pixel clipping in inView

getBoundingClientRect returns fractional values while scrollTop, offsetTop
and clientHeight are integers, so a container scrolled right up to its
limit could still appear to clip the element by a fraction of a pixel.
inView then reported the element invisible and scrollIntoViewIfNeeded
fell through to elm.scrollIntoView(), needlessly scrolling the whole
page (breaking e.g. Perfect Scrollbar integrations). Elements clipped by
less than a pixel are now treated as visible.

Reported by Ralf Pichler (Uniquare, Jodit OEM).

Author: eric-mallac

CHANGELOG.md

@@ -9,6 +9,12 @@
 > - :house: [Internal]
 > - :nail_care: [Polish]
 
+## 4.13.18
+
+#### :bug: Bug Fix
+
+- **Helpers/`inView`**: `getBoundingClientRect` returns fractional values while scroll offsets are integers, so a container scrolled right up to its limit could still appear to clip the element by a fraction of a pixel — `scrollIntoViewIfNeeded` then needlessly fell through to `elm.scrollIntoView()` and scrolled the whole page (breaking e.g. Perfect Scrollbar integrations). Elements clipped by less than a pixel are now treated as visible. Reported by Ralf Pichler (Uniquare, Jodit OEM).
+
 ## 4.13.17
 
 #### :bug: Bug Fix

src/core/helpers/utils/scroll-into-view.test.js

@@ -46,4 +46,67 @@ describe('Helper inView', () => {
 			box.remove();
 		}
 	});
+
+	// Fractional rect values vs integer scroll offsets: a container scrolled
+	// to its limit can still "clip" the element by a fraction of a pixel and
+	// must not trigger a whole-page scrollIntoView
+	describe('Sub-pixel clipping', () => {
+		const makeScrollable = () => {
+			const box = document.createElement('div');
+			box.style.cssText =
+				'position:fixed;left:0;top:0;width:100px;height:100px;overflow:auto;';
+
+			const filler = document.createElement('div');
+			filler.style.cssText = 'height:90.4px;margin:0;';
+
+			const child = document.createElement('p');
+			child.style.cssText = 'height:19px;margin:0;';
+
+			box.appendChild(filler);
+			box.appendChild(child);
+
+			document.body.appendChild(box);
+			return { box, child };
+		};
+
+		it('Should treat an element clipped by a fraction of a pixel as visible', () => {
+			const { box, child } = makeScrollable();
+			try {
+				// Integer scroll position leaves a 0.4px overhang below the box
+				box.scrollTop = 9;
+				expect(inView(child, box, document)).is.true;
+			} finally {
+				box.remove();
+			}
+		});
+
+		it('Should still treat an element clipped by a whole line as invisible', () => {
+			const { box, child } = makeScrollable();
+			try {
+				// Not scrolled: the child sits ~9.4px below the box bottom
+				expect(inView(child, box, document)).is.false;
+			} finally {
+				box.remove();
+			}
+		});
+
+		it('Should not fall back to scrollIntoView when scrolling the container is enough', () => {
+			const { scrollIntoViewIfNeeded } = Jodit.modules.Helpers;
+			const { box, child } = makeScrollable();
+
+			let called = false;
+			child.scrollIntoView = () => {
+				called = true;
+			};
+
+			try {
+				scrollIntoViewIfNeeded(child, box, document);
+				expect(box.scrollTop).is.above(0);
+				expect(inView(child, box, document)).is.true;
+				expect(called).is.false;
+			} finally {
+				box.remove();
+			}
+		});
+	});
 });

src/core/helpers/utils/scroll-into-view.ts

@@ -15,6 +15,16 @@ import { Dom } from 'jodit/core/dom/dom';
  * @module helpers/utils
  */
 
+/**
+ * `getBoundingClientRect` returns fractional values while `scrollTop`,
+ * `offsetTop` and `clientHeight` are rounded to integers, so a container
+ * scrolled right up to its limit can still appear to clip the element by a
+ * fraction of a pixel. Treat anything clipped by less than a pixel as
+ * visible — otherwise `scrollIntoViewIfNeeded` falls through to
+ * `elm.scrollIntoView()` and needlessly scrolls the whole page.
+ */
+const SUBPIXEL_TOLERANCE = 1;
+
 /**
  * Check if element is in view
  */
@@ -38,7 +48,7 @@ export function inView(
 		// view even though its top still fits. The `top > rect.top` guard keeps
 		// elements taller than the container (which can never fully fit) from
 		// being treated as always out of view. See #1300
-		if (top + height > rect.bottom && top > rect.top) {
+		if (top + height > rect.bottom + SUBPIXEL_TOLERANCE && top > rect.top) {
 			return false;
 		}
 
@@ -56,7 +66,10 @@ export function inView(
 	const clientHeight =
 		(doc.documentElement && doc.documentElement.clientHeight) || 0;
 
-	return (top + height <= clientHeight || top <= 0) && top + height >= 0;
+	return (
+		(top + height <= clientHeight + SUBPIXEL_TOLERANCE || top <= 0) &&
+		top + height >= 0
+	);
 }
 
 /**