Skip to content

fix: textfield masking and element transform positioning in session replay#305

Open
ioannisj wants to merge 5 commits intomainfrom
fix/textfield-masking
Open

fix: textfield masking and element transform positioning in session replay#305
ioannisj wants to merge 5 commits intomainfrom
fix/textfield-masking

Conversation

@ioannisj
Copy link
Collaborator

💡 Motivation and Context

Closes #239

Fixes mask positioning for TextFields and elements under transforms (e.g. ScreenUtil scaling, rotations).

  • Mask positioning: Switched from localToGlobal to getTransformTo(ancestor) using the screenshot container as the coordinate reference. This correctly handles ScreenUtil scaling, Transform.scale, Transform.rotate, and nested transforms.
  • Added RenderEditableParser: TextField text is rendered by RenderEditable, whose layout bounds can be much smaller than the actual text (e.g. 1.3px vs 39px with isDense: true + ScreenUtil). This parser uses preferredLineHeight to calculate the correct mask height.
  • TextField masking delegation: When maskAllTexts is enabled, TextField masking is now handled at the RenderEditable level (better bounds) rather than widget level. Widget-level masking only applies for obscureText fields when maskAllTexts is disabled.
  • ImageMaskPainter transform support: Mask drawing now applies the element's Matrix4 transform, correctly positioning masks in the screenshot's coordinate space regardless of scaling or rotation.

💚 How did you test it?

  • Added MaskingTestsScreen with test cases for text, images, TextFields, transforms, and PostHogMaskWidget.
  • Verified with customer's MRE

📝 Checklist

  • I reviewed the submitted code.
  • I added tests to verify the changes.
  • I updated the docs if needed.
  • No breaking change or entry added to the changelog.

If releasing new changes

  • Ran pnpm changeset to generate a changeset file
  • Added the release label to the PR

@ioannisj ioannisj requested a review from a team as a code owner February 24, 2026 08:57
@override
Rect? buildElementRect(Element element, Rect? parentRect) {
final RenderImage renderImage = element.renderObject as RenderImage;
({Rect rect, Matrix4 transform})? buildElementData(Element element) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

use a typedef or a data class to the return type so you dont have to repeat this and its self documented


for (var elementData in items) {
paint.color = Colors.black;
if (elementData.widget is PostHogMaskWidget) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why don we check this anymore?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

PostHogMaskWidget not masking propperly on wide screens

2 participants