Skip to content

Fix ContentIsland-hosted content rendering at reduced size on scaled displays #16383

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Collin Schneide (FaithfulAudio) wants to merge 1 commit into
base: main
Choose a base branch
from
+18 −0
Open

Fix ContentIsland-hosted content rendering at reduced size on scaled displays #16383

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions vnext/Microsoft.ReactNative/Fabric/Composition/ContentIslandComponentView.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,24 @@ void ContentIslandComponentView::ConnectInternal() noexcept {

ChildSiteLink().ActualSize({m_layoutMetrics.frame.size.width, m_layoutMetrics.frame.size.height});

// The child site reports ShouldApplyRasterizationScale = false: the host is

@vmoroz Vladimir Morozov (vmoroz) Aug 21, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Please prefer putting long descriptions like this into the PR description. Having such long bug explanation comments inside of the code reduces the code readability.
If comment is needed, then it should be relatively short and be useful for understanding code later outside of the PR.

// responsible for applying the island's rasterization scale at presentation.
// This placement visual lives in the physical-pixel composition tree, so
// without a scale the hosted content lays out at DIP size, rasterizes at
// RasterizationScale, and presents unscaled - on a display above 100% scale,
// hosted islands render proportionally smaller in the top-left of their
// frame (observed with a WebView2-hosted island at 200%: site ActualSize
// 1368x728 DIPs, RasterizationScale 2.0, rendered at exactly half size).
// Scaling the placement visual by pointScaleFactor is the missing host-side
// step; at 100% scale this is Scale(1,1,1), a no-op.
{
auto placementVisual =
winrt::Microsoft::ReactNative::Composition::Experimental::CompositionContextHelper::InnerVisual(Visual())
.as<winrt::Microsoft::UI::Composition::ContainerVisual>();
const float placementScale = m_layoutMetrics.pointScaleFactor;
placementVisual.Scale({placementScale, placementScale, 1.0f});
Comment on lines +85 to +86
}

// Issue #15557: Set initial LocalToParentTransformMatrix synchronously before Connect.
// This fixes popup position being wrong even without scrolling.
// Note: getClientRect() returns physical pixels, but LocalToParentTransformMatrix expects DIPs.
Expand Down