fix: optimise fix for iOS

- update images

Author: wswebcreation

packages/image-comparison-core/src/methods/__snapshots__/images.test.ts.snap

@@ -2137,7 +2137,7 @@ exports[`makeFullPageBase64Image > should handle screenshots with cropping posit
   [
     {
       "h": 500,
-      "w": 500,
+      "w": 900,
       "x": 100,
       "y": 50,
     },
@@ -2159,7 +2159,7 @@ exports[`makeFullPageBase64Image > should handle screenshots with cropping posit
           [
             {
               "h": 500,
-              "w": 500,
+              "w": 900,
               "x": 100,
               "y": 50,
             },

packages/image-comparison-core/src/methods/__snapshots__/screenshots.test.ts.snap

@@ -176,7 +176,7 @@ exports[`screenshots > getMobileFullPageNativeWebScreenshotsData > should handle
     },
   ],
   "fullPageHeight": 637,
-  "fullPageWidth": 1334,
+  "fullPageWidth": 667,
 }
 `;
 
@@ -203,7 +203,7 @@ exports[`screenshots > getMobileFullPageNativeWebScreenshotsData > should hide e
     },
   ],
   "fullPageHeight": 2623,
-  "fullPageWidth": 750,
+  "fullPageWidth": 375,
 }
 `;
 
@@ -230,7 +230,7 @@ exports[`screenshots > getMobileFullPageNativeWebScreenshotsData > should take m
     },
   ],
   "fullPageHeight": 1289,
-  "fullPageWidth": 375,
+  "fullPageWidth": 187.5,
 }
 `;
 
@@ -248,7 +248,7 @@ exports[`screenshots > getMobileFullPageNativeWebScreenshotsData > should take s
     },
   ],
   "fullPageHeight": 637,
-  "fullPageWidth": 750,
+  "fullPageWidth": 375,
 }
 `;
 

packages/image-comparison-core/src/methods/images.ts

@@ -462,7 +462,7 @@ export async function makeFullPageBase64Image(
         const { height: screenshotHeight, width: screenshotWidth } = getBase64ScreenshotSize(currentScreenshot, devicePixelRatio)
         const isRotated = isLandscape && screenshotHeight > screenshotWidth
         const newBase64Image = isRotated ? await rotateBase64Image({ base64Image: currentScreenshot, degrees: 90 }) : currentScreenshot
-        const { canvasYPosition, imageHeight, imageWidth, imageXPosition, imageYPosition } = screenshotsData.data[i]
+        const { canvasYPosition, imageHeight, imageXPosition, imageYPosition } = screenshotsData.data[i]
         const image = await Jimp.read(Buffer.from(newBase64Image, 'base64'))
 
         // Clamp crop dimensions to fit within the actual image bounds
@@ -471,7 +471,10 @@ export async function makeFullPageBase64Image(
         const actualImageHeight = image.bitmap.height
         const clampedCropX = Math.max(0, Math.min(imageXPosition, actualImageWidth - 1))
         const clampedCropY = Math.max(0, Math.min(imageYPosition, actualImageHeight - 1))
-        const clampedCropWidth = Math.min(imageWidth, actualImageWidth - clampedCropX)
+        // Ensure the cropped width matches the canvas width to avoid 1px gaps due to rounding
+        // The canvas width is the target, but we must not exceed the available image bounds
+        const maxAvailableWidth = actualImageWidth - clampedCropX
+        const clampedCropWidth = Math.min(canvasWidth, maxAvailableWidth)
         const clampedCropHeight = Math.min(imageHeight, actualImageHeight - clampedCropY)
 
         canvas.composite(

packages/image-comparison-core/src/methods/screenshots.test.ts

@@ -91,6 +91,14 @@ describe('screenshots', () => {
 
             vi.mocked(utilsModule.waitFor).mockResolvedValue(undefined)
             vi.mocked(utilsModule.calculateDprData).mockImplementation((data) => data)
+            vi.mocked(utilsModule.getBase64ScreenshotSize).mockImplementation((_screenshot, dpr = 1) => {
+                const baseWidth = 750
+                const baseHeight = 1334
+                return {
+                    width: Math.round(baseWidth / dpr),
+                    height: Math.round(baseHeight / dpr)
+                }
+            })
         })
 
         afterEach(() => {

packages/image-comparison-core/src/methods/screenshots.ts

@@ -48,6 +48,7 @@ export async function getMobileFullPageNativeWebScreenshotsData(browserInstance:
     const amountOfScrollsArray = []
     let scrollHeight: number | undefined
     let isRotated = false
+    let actualFullPageWidth: number | undefined
 
     for (let i = 0; i <= amountOfScrollsArray.length; i++) {
         // Determine and start scrolling
@@ -151,7 +152,7 @@ export async function getMobileFullPageNativeWebScreenshotsData(browserInstance:
             : scrollY
 
         // Store all the screenshot data in the screenshot object
-        viewportScreenshots.push({
+        const screenshotData = {
             ...calculateDprData(
                 {
                     canvasWidth: isRotated ? effectiveViewportHeight : viewportWidth,
@@ -164,7 +165,19 @@ export async function getMobileFullPageNativeWebScreenshotsData(browserInstance:
                 devicePixelRatio,
             ),
             screenshot,
-        })
+        }
+        viewportScreenshots.push(screenshotData)
+
+        // Calculate the actual cropped width from the first screenshot to handle rounding differences
+        if (i === 0 && !actualFullPageWidth) {
+            const { height: screenshotHeightDevicePixels, width: screenshotWidthDevicePixels } = getBase64ScreenshotSize(screenshot)
+            const screenshotIsRotated = Boolean(isLandscape && screenshotHeightDevicePixels > screenshotWidthDevicePixels)
+            const actualScreenshotWidthDevicePixels = screenshotIsRotated ? screenshotHeightDevicePixels : screenshotWidthDevicePixels
+            const maxAvailableWidthDevicePixels = actualScreenshotWidthDevicePixels - screenshotData.imageXPosition
+            const actualCroppedWidthDevicePixels = Math.min(screenshotData.imageWidth, maxAvailableWidthDevicePixels)
+
+            actualFullPageWidth = actualCroppedWidthDevicePixels / devicePixelRatio
+        }
 
         // Show scrollbars again
         await browserInstance.execute(hideScrollBars, false)
@@ -184,7 +197,7 @@ export async function getMobileFullPageNativeWebScreenshotsData(browserInstance:
     }
 
     const fullPageHeight = scrollHeight - addressBarShadowPadding - toolBarShadowPadding
-    const fullPageWidth = isRotated ? effectiveViewportHeight : viewportWidth
+    const fullPageWidth = actualFullPageWidth ?? (isRotated ? effectiveViewportHeight : viewportWidth)
 
     return {
         ...calculateDprData(