Web source: CSS reset per document + (0,0) anchor — kill box-vs-content padding

This commit is contained in:
2026-08-28 10:41:33 -07:00
parent e917c41a48
commit 9d4103c44b
4 changed files with 27 additions and 10 deletions
+2 -1
View File
@@ -44,6 +44,7 @@ Build: 0 warnings, 0 errors. User verified it renders correctly.
- No `CODING.md`; conventions live in `AGENTS.md` + `ai.md`. - No `CODING.md`; conventions live in `AGENTS.md` + `ai.md`.
## Next steps ## Next steps
1. Await creator comments on the committed rendering fix; address what he raises. 1. Await creator comments on the committed rendering fix; address what he raises; also testing
the box-vs-content padding fix (CSS reset + (0,0) anchor) just committed.
2. Follow-up only if the creator asks: graceful handling of navigation errors / invalid URIs (TASK 17 ×9). 2. Follow-up only if the creator asks: graceful handling of navigation errors / invalid URIs (TASK 17 ×9).
3. Continue queue: TASK 18 local recording, TASK 21 media source, TASK 22 audio sync offset. 3. Continue queue: TASK 18 local recording, TASK 21 media source, TASK 22 audio sync offset.
+2
View File
@@ -857,6 +857,8 @@
<DataTrigger Binding="{Binding IsWebSource}" Value="True"> <DataTrigger Binding="{Binding IsWebSource}" Value="True">
<Setter Property="Visibility" Value="Visible"/> <Setter Property="Visibility" Value="Visible"/>
<Setter Property="Stretch" Value="Uniform"/> <Setter Property="Stretch" Value="Uniform"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Top"/>
</DataTrigger> </DataTrigger>
<MultiDataTrigger> <MultiDataTrigger>
<MultiDataTrigger.Conditions> <MultiDataTrigger.Conditions>
+16 -9
View File
@@ -15,6 +15,20 @@ namespace ytLive.Services;
public sealed class WebView2Manager : IDisposable public sealed class WebView2Manager : IDisposable
{ {
// Eliminates the wrapper padding/whitespace between the box and the page:
// clears UA margins/paddings, forces html/body to fill the viewport and
// anchors content at (0,0) so the rendered frame matches the widget's size.
private const string CssResetInjection =
"(function(){" +
"var s=document.createElement('style');" +
"s.textContent='html,body{margin:0!important;padding:0!important;" +
"width:100%!important;height:100%!important;overflow:hidden!important;" +
"background:transparent!important}';" +
"(document.head||document.documentElement).appendChild(s);" +
"if(document.documentElement)document.documentElement.style.background='transparent';" +
"if(document.body)document.body.style.background='transparent';" +
"})();";
private readonly Panel _hostPanel; private readonly Panel _hostPanel;
private readonly Dispatcher _dispatcher; private readonly Dispatcher _dispatcher;
private readonly Dictionary<string, WebSourceSession> _sessions = new(); private readonly Dictionary<string, WebSourceSession> _sessions = new();
@@ -108,18 +122,11 @@ public sealed class WebView2Manager : IDisposable
var cws = session.Control.CoreWebView2!; var cws = session.Control.CoreWebView2!;
cws.NavigationStarting += (_, e) => await cws.AddScriptToExecuteOnDocumentCreatedAsync(CssResetInjection);
{
_ = cws.ExecuteScriptAsync(
"document.documentElement.style.background='transparent';" +
"document.body.style.background='transparent';");
};
cws.NavigationCompleted += (_, _) => cws.NavigationCompleted += (_, _) =>
{ {
_ = cws.ExecuteScriptAsync( _ = cws.ExecuteScriptAsync(CssResetInjection);
"document.documentElement.style.background='transparent';" +
"document.body.style.background='transparent';");
_ = CaptureFrame(source.Id); _ = CaptureFrame(source.Id);
}; };
+7
View File
@@ -923,6 +923,13 @@ canvas size (1920×1080) in `Register`, never tracking the element box — the O
box-sized viewport was the truncation bug. Display `Stretch`: web → `Uniform` (no crop), box-sized viewport was the truncation bug. Display `Stretch`: web → `Uniform` (no crop),
everything else → `UniformToFill`. Graceful-error handling (item 9) is a follow-up. everything else → `UniformToFill`. Graceful-error handling (item 9) is a follow-up.
**Box-vs-content padding (2026-08-28):** whitespace gaps between the bounding box and the web
content were the page's own UA margins/padding + body sizing to content instead of the viewport.
Fixed by injecting a CSS reset into every document via
`CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync` (margin/padding 0, html/body 100% of
viewport, overflow hidden, transparent bg) and anchoring the web `<Image>` at (0,0)
(`HorizontalAlignment/VerticalAlignment=Left/Top`) inside the element box.
### Design decisions ### Design decisions
- WebView2 is the only option for Windows — it's pre-installed on Windows 10 20H2+ and Windows 11 - WebView2 is the only option for Windows — it's pre-installed on Windows 10 20H2+ and Windows 11