Web source: CSS reset per document + (0,0) anchor — kill box-vs-content padding
This commit is contained in:
+2
-1
@@ -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.
|
||||||
@@ -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>
|
||||||
|
|||||||
@@ -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);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user