fix: remove double-rounding in viewport offset calculation

Remove Math.round from injectWebviewOverlay to preserve float precision.
In getMobileViewPortPosition, derive dimensions from edges and cap to
screen bounds to guarantee consistent sums.

Made-with: Cursor

Author: wswebcreation

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

@@ -67,6 +67,40 @@ describe('injectWebviewOverlay', () => {
         })
     })
 
+    it('should preserve float precision with non-integer DPR (Android)', () => {
+        Object.defineProperty(window, 'devicePixelRatio', {
+            value: 2.625,
+            configurable: true,
+        })
+        Object.defineProperty(window, 'innerWidth', {
+            value: 412,
+            configurable: true,
+        })
+        Object.defineProperty(document.documentElement, 'clientHeight', {
+            value: 363,
+            configurable: true,
+        })
+
+        injectWebviewOverlay(true)
+
+        const overlay = document.querySelector('[data-test="ics-overlay"]') as HTMLDivElement
+        const event = new window.MouseEvent('click', {
+            clientX: 206,
+            clientY: 181,
+            bubbles: true,
+        })
+        overlay.dispatchEvent(event)
+
+        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,
+        })
+    })
+
     it('should use DPR = 1 for iOS (isAndroid = false)', () => {
         injectWebviewOverlay(false)
 

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: Math.round(x * dpr),
-            y: Math.round(y * dpr),
-            width: Math.round(window.innerWidth * dpr),
-            height: Math.round(document.documentElement.clientHeight * dpr),
+            x: x * dpr,
+            y: y * dpr,
+            width: window.innerWidth * dpr,
+            height: document.documentElement.clientHeight * dpr,
         }
 
         overlay.dataset.icsWebviewData = JSON.stringify(data)

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

@@ -691,6 +691,49 @@ describe('utils', () => {
             expect(result).toMatchSnapshot()
         })
 
+        it('should handle float overlay values from non-integer DPR and ensure consistent dimensions', async () => {
+            const dpr = 2.625
+            const screenW = 1080
+            const screenH = 2424
+
+            const cssClickX = 206
+            const cssClickY = 385
+            const cssWidth = 412
+            const cssHeight = 363
+
+            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)
+
+            const result = await getMobileViewPortPosition({
+                browserInstance: mockBrowserInstance,
+                ...baseOptions,
+                screenHeight: screenH,
+                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)
+
+            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)
+        })
+
         it('should return initialDeviceRectangles if not WebView (native context)', async () => {
             const result = await getMobileViewPortPosition({
                 browserInstance: mockBrowserInstance,

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

@@ -526,21 +526,24 @@ 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
+        // 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).
         const viewportTop = Math.max(0, Math.round(nativeClickY - y))
         const viewportLeft = Math.max(0, Math.round(nativeClickX - x))
-        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 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 deviceRectangles = {
             ...initialDeviceRectangles,
-            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 },
+            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 },
             screenSize: { height: screenHeight, width: screenWidth },
-            statusBarAndAddressBar: { y: 0, x: 0, width: screenWidth, height: statusBarAndAddressBarHeight },
-            viewport: { y: viewportTop, x: viewportLeft, width: width, height: height },
+            statusBarAndAddressBar: { y: 0, x: 0, width: screenWidth, height: viewportTop },
+            viewport: { y: viewportTop, x: viewportLeft, width: viewportWidth, height: viewportHeight },
         }
 
         return deviceRectangles