fix: revert viewport rounding changes and fix scrollElementIntoView

- Revert injectWebviewOverlay.ts to use Math.round() for viewport data
  collection, fixing ~0.2% fullpage stitching mismatches on Android
- Revert getMobileViewPortPosition to main's calculation logic, removing
  Math.min clamping that caused viewport dimension inconsistencies
- Fix scrollElementIntoView to account for current scroll position when
  computing target scroll offset (BCR.top is viewport-relative, not
  document-absolute), preventing blank iOS element screenshots
- Update unit tests and regenerate affected Android fullpage baselines

Made-with: Cursor

Author: wswebcreation

packages/image-comparison-core/src/clientSideScripts/injectWebviewOverlay.test.ts

@@ -67,7 +67,7 @@ describe('injectWebviewOverlay', () => {
         })
     })
 
-    it('should preserve float precision with non-integer DPR (Android)', () => {
+    it('should round values to integers with non-integer DPR (Android)', () => {
         Object.defineProperty(window, 'devicePixelRatio', {
             value: 2.625,
             configurable: true,
@@ -94,10 +94,10 @@ describe('injectWebviewOverlay', () => {
         const parsedData = JSON.parse(overlay.dataset.icsWebviewData!)
 
         expect(parsedData).toEqual({
-            x: 206 * 2.625,
-            y: 181 * 2.625,
-            width: 412 * 2.625,
-            height: 363 * 2.625,
+            x: Math.round(206 * 2.625),
+            y: Math.round(181 * 2.625),
+            width: Math.round(412 * 2.625),
+            height: Math.round(363 * 2.625),
         })
     })
 

packages/image-comparison-core/src/clientSideScripts/injectWebviewOverlay.ts

@@ -21,10 +21,10 @@ export function injectWebviewOverlay(isAndroid: boolean): void {
     overlay.onclick = (event) => {
         const { clientX: x, clientY: y } = event
         const data = {
-            x: x * dpr,
-            y: y * dpr,
-            width: window.innerWidth * dpr,
-            height: document.documentElement.clientHeight * dpr,
+            x: Math.round(x * dpr),
+            y: Math.round(y * dpr),
+            width: Math.round(window.innerWidth * dpr),
+            height: Math.round(document.documentElement.clientHeight * dpr),
         }
 
         overlay.dataset.icsWebviewData = JSON.stringify(data)

packages/image-comparison-core/src/clientSideScripts/scrollElementIntoView.test.ts

@@ -69,7 +69,7 @@ describe('scrollElementIntoView', () => {
         const result = scrollElementIntoView(mockElement, addressBarShadowPadding)
 
         expect(result).toBe(50)
-        // Document y = currentScroll(50) + BCR.top(100) - padding(10) = 140
+        // currentPosition (50) + BCR.top (100) - padding (10) = 140
         expect(mockHtmlNode.scrollTop).toBe(140)
     })
 
@@ -81,21 +81,10 @@ describe('scrollElementIntoView', () => {
         const result = scrollElementIntoView(mockElement, addressBarShadowPadding)
 
         expect(result).toBe(50)
-        // Document y = currentScroll(50) + BCR.top(100) - padding(10) = 140
+        // currentPosition (50) + BCR.top (100) - padding (10) = 140
         expect(mockBodyNode.scrollTop).toBe(140)
     })
 
-    it('should not re-scroll when element is already at the viewport top', () => {
-        mockHtmlNode.scrollTop = 600
-        ;(mockElement.getBoundingClientRect as ReturnType<typeof vi.fn>).mockReturnValue({ top: 0 })
-        const addressBarShadowPadding = 0
-        const result = scrollElementIntoView(mockElement, addressBarShadowPadding)
-
-        expect(result).toBe(600)
-        // Document y = currentScroll(600) + BCR.top(0) - padding(0) = 600 (stays put)
-        expect(mockHtmlNode.scrollTop).toBe(600)
-    })
-
     it('should not scroll when neither html nor body is scrollable', () => {
         Object.defineProperty(mockHtmlNode, 'scrollHeight', { value: 500 })
         Object.defineProperty(mockBodyNode, 'scrollHeight', { value: 500 })

packages/image-comparison-core/src/helpers/utils.test.ts

@@ -691,7 +691,7 @@ describe('utils', () => {
             expect(result).toMatchSnapshot()
         })
 
-        it('should handle float overlay values from non-integer DPR and ensure consistent dimensions', async () => {
+        it('should handle rounded overlay values from non-integer DPR', async () => {
             const dpr = 2.625
             const screenW = 1080
             const screenH = 2424
@@ -701,17 +701,20 @@ describe('utils', () => {
             const cssWidth = 412
             const cssHeight = 363
 
+            const overlayWidth = Math.round(cssWidth * dpr)
+            const overlayHeight = Math.round(cssHeight * dpr)
+
             vi.mocked(mockBrowserInstance.execute)
                 .mockResolvedValueOnce(undefined) // loadBase64Html
                 .mockResolvedValueOnce(undefined) // checkMetaTag (iOS)
                 .mockResolvedValueOnce(undefined) // injectWebviewOverlay
                 .mockResolvedValueOnce(undefined) // executeNativeClick
                 .mockResolvedValueOnce({
-                    x: cssClickX * dpr,
-                    y: cssClickY * dpr,
-                    width: cssWidth * dpr,
-                    height: cssHeight * dpr,
-                }) // getMobileWebviewClickAndDimensions (floats, not rounded)
+                    x: Math.round(cssClickX * dpr),
+                    y: Math.round(cssClickY * dpr),
+                    width: overlayWidth,
+                    height: overlayHeight,
+                }) // getMobileWebviewClickAndDimensions (rounded integers from overlay)
 
             const result = await getMobileViewPortPosition({
                 browserInstance: mockBrowserInstance,
@@ -720,18 +723,14 @@ describe('utils', () => {
                 screenWidth: screenW,
             })
 
-            const viewportTop = Math.max(0, Math.round(screenH / 2 - cssClickY * dpr))
-            const viewportLeft = Math.max(0, Math.round(screenW / 2 - cssClickX * dpr))
-            const viewportWidth = Math.min(Math.round(cssWidth * dpr), screenW - viewportLeft)
-            const viewportHeight = Math.min(Math.round(cssHeight * dpr), screenH - viewportTop)
+            const viewportTop = Math.max(0, Math.round(screenH / 2 - Math.round(cssClickY * dpr)))
+            const viewportLeft = Math.max(0, Math.round(screenW / 2 - Math.round(cssClickX * dpr)))
 
             expect(result.viewport.y).toBe(viewportTop)
             expect(result.viewport.x).toBe(viewportLeft)
-            expect(result.viewport.width).toBe(viewportWidth)
-            expect(result.viewport.height).toBe(viewportHeight)
-            expect(result.statusBarAndAddressBar.height).toBe(viewportTop)
-            expect(result.viewport.y + result.viewport.height + result.bottomBar.height).toBe(screenH)
-            expect(result.viewport.x + result.viewport.width + result.rightSidePadding.width).toBe(screenW)
+            expect(result.viewport.width).toBe(overlayWidth)
+            expect(result.viewport.height).toBe(overlayHeight)
+            expect(result.statusBarAndAddressBar.height).toBe(Math.max(0, Math.round(viewportTop)))
         })
 
         it('should return initialDeviceRectangles if not WebView (native context)', async () => {

packages/image-comparison-core/src/helpers/utils.ts

@@ -526,24 +526,21 @@ export async function getMobileViewPortPosition({
         const { y, x, width, height } = await browserInstance.execute(getMobileWebviewClickAndDimensions, '[data-test="ics-overlay"]')
         // 4.b reset the url
         await browserInstance.url(currentUrl)
-        // 5. Calculate the position of the viewport based on the click position of the native click vs the overlay.
-        //    The overlay values may be floats (CSS pixels * DPR for Android, CSS pixels for iOS).
-        //    We round edges once and derive dimensions from edges to guarantee
-        //    viewportTop + viewportHeight + bottomBarHeight === screenHeight (no gaps).
+        // 5. Calculate the position of the viewport based on the click position of the native click vs the overlay
         const viewportTop = Math.max(0, Math.round(nativeClickY - y))
         const viewportLeft = Math.max(0, Math.round(nativeClickX - x))
-        const viewportWidth = Math.min(Math.round(width), screenWidth - viewportLeft)
-        const viewportHeight = Math.min(Math.round(height), screenHeight - viewportTop)
-        const bottomBarHeight = Math.max(0, screenHeight - viewportTop - viewportHeight)
-        const rightSidePaddingWidth = Math.max(0, screenWidth - viewportLeft - viewportWidth)
+        const statusBarAndAddressBarHeight = Math.max(0, Math.round(viewportTop))
+        const bottomBarHeight = Math.max(0, Math.round(screenHeight - (viewportTop + height)))
+        const leftSidePaddingWidth = Math.max(0, Math.round(viewportLeft))
+        const rightSidePaddingWidth = Math.max(0, Math.round(screenWidth - (viewportLeft + width)))
         const deviceRectangles = {
             ...initialDeviceRectangles,
-            bottomBar: { y: viewportTop + viewportHeight, x: 0, width: screenWidth, height: bottomBarHeight },
-            leftSidePadding: { y: viewportTop, x: 0, width: viewportLeft, height: viewportHeight },
-            rightSidePadding: { y: viewportTop, x: viewportLeft + viewportWidth, width: rightSidePaddingWidth, height: viewportHeight },
+            bottomBar: { y: viewportTop + height, x: 0, width: screenWidth, height: bottomBarHeight },
+            leftSidePadding: { y: viewportTop, x: 0, width: leftSidePaddingWidth, height: height },
+            rightSidePadding: { y: viewportTop, x: viewportLeft + width, width: rightSidePaddingWidth, height: height },
             screenSize: { height: screenHeight, width: screenWidth },
-            statusBarAndAddressBar: { y: 0, x: 0, width: screenWidth, height: viewportTop },
-            viewport: { y: viewportTop, x: viewportLeft, width: viewportWidth, height: viewportHeight },
+            statusBarAndAddressBar: { y: 0, x: 0, width: screenWidth, height: statusBarAndAddressBarHeight },
+            viewport: { y: viewportTop, x: viewportLeft, width: width, height: height },
         }
 
         return deviceRectangles