Tutorial spotlight overlay renders too large on some mobile devices despite correct measured size

Help and Feedback Scripting Support
1

I have a tutorial “spotlight” — a Frame (AnchorPoint 0.5, 0.5) with a UIStroke of thickness 10000 that darkens the screen except for a cutout hugging a highlighted UI element. Every RenderStepped, a driver sets the frame’s Position and Size (in offsets) to match the target GuiObject’s AbsolutePosition/AbsoluteSize plus a small padding.

Setup:

  • ScreenGui: IgnoreGuiInset = false, ScreenInsets = CoreUISafeInsets.
  • Spotlight is a direct child of the ScreenGui (no scaling ancestors).
  • Targets are sized via UIAspectRatioConstraint chains and live inside a CanvasGroup.

The problem: On some phones (for example: iPhone 16, 852×393) the spotlight renders noticeably larger than the element it should hug. On PC and some tablet it looks correct.

What I’ve already verified (so please don’t suggest these):

  • Position math is correct — measured spotlight lands within 5px of the target center.
  • Target AbsoluteSize is stable from frame 0 (logged 8 consecutive frames after the element appears — no layout-settling drift).
  • Origin/inset handling is correct (using spotlight.Parent.AbsolutePosition, not GetGuiInset, because of CoreUISafeInsets).
  • I removed an easing/lerp transient where the frame glided in from the previous step’s size — snapping instantly fixed the measured values, but the visual issue persists on device.

Questions:

  1. Does CanvasGroup introduce any resolution scaling that would make a sibling overlay (outside the CanvasGroup) appear mismatched from a target inside it?
  2. Is there a known device-DPI/scaling quirk where offset-based Size renders larger than the pixel values suggest?

This is my first time doing a tutorial system, especially one that utilizes UIStroke so bear with me please!

RobloxScreenShot20260711_161817670
RobloxScreenShot20260711_1618176701263×583 341 KB

RobloxScreenShot20260711_161836502
RobloxScreenShot20260711_1618365021130×635 306 KB

2

Currently how do you move it, if your using render stepped I’d assume your not using tween service. I believe if you tweened the transparent frame to the exact position and size of the ui element it would work. Ima do some research on how to find where a frame thats scaled under another scaled frame is.

3

You can just use absolute pos and size, so just tween the spotlight frame to the size amd pos of the highlighted frame.

4

If this is effectively the same as what your doing and its landing at the correct absolute position/size then the absolute pos/size is wrong