Skip to content

[Driver bug] iOS element screenshot returns full element size but only viewport-visible content; rest is black #1127

@wswebcreation

Description

@wswebcreation

Summary

When taking an element screenshot on iOS (Safari, real device or simulator) via the WebDriver takeElementScreenshot command, the driver returns an image that has the dimensions of the element's full bounding rect (e.g. 390×844 px), but only the viewport-visible portion of the element is filled with real pixel data; the rest of the image is black.

This is an upstream driver bug: the automation stack (iOS Safari / WebDriver implementation) returns a full-size bitmap but only captures the visible content. This repository does not create or pad the image; it uses the driver response as-is.

Environment

  • Platform: iOS (Safari), real device or simulator
  • Flow: Web context, saveWebElement / checkWebElement (element screenshot of a DOM element)
  • Reproducible: Whenever the element is taller (or larger) than the viewport

Observed behavior

  1. User takes an element screenshot of a tall element (e.g. a section that extends below the fold).
  2. The saved/compared image has width × height equal to the element's full bounding rect (e.g. 390×844).
  3. Only the top part of the image (the part that was visible in the viewport) shows the actual UI.
  4. The remaining part of the image is solid black.

So the image is "cropped" to the element's size by the driver, but the driver only fills the viewport-visible region; the rest is black.

Expected behavior

The driver should either:

  • Return an image of the full element content (e.g. by capturing the whole element or stitching viewport captures), or
  • Return an image that is only as large as the captured content (viewport-visible part only), without a full-size buffer filled with black.

Technical note

In this project, the web element screenshot path calls browser.takeElementScreenshot(elementId) and uses the returned base64 image and its dimensions. No canvas or black padding is applied here; the black area is present in the image returned by the driver.

References

Example

Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions