uno
uno copied to clipboard
unoplatform
[WASM] Missing iFrame width and height from WebView2 control, remove border
Current behavior
Currently the iframe element is missing width and height of the WebView2 control/ content presenter. Also, the iframe element has a border, but not the WebView2 control.
The WebView2 control is part of a Grid layout panel, which is stretched in width and height.
Expected behavior
Use all styles from WebView2 control. Remove default border.
How to reproduce it (as minimally and precisely as possible)
No response
Workaround
No response
Works on UWP/WinUI
None
Environment
No response
NuGet package version(s)
No response
Renderer
- [ ] Skia
- [x] Native
Affected platforms
WebAssembly
IDE
Visual Studio 2022
IDE version
No response
Relevant plugins
No response
Anything else we need to know?
No response
@agneszitte
The PR https://github.com/unoplatform/uno/pull/20644 is not backported in the 6.0.119.
Moving back to todo as the issue is only fixed for native but still persist in Skia.
From what I understand there's two problems stated in this issue:
- WebView2
iframedoesn't have a Width/Height specified. - WebView2
iframehas a border.
QA results
There are different behaviors for Native and Skia using SDK 6.0.123:
With native rendering, the iframe does not have height and width, but also does not have a border:
Native screenshot
With skia rendering, the iframe has a height and width, but still has a border:
Skia screenshot
| Rendering | iframe Dimensions | iframe Border |
|---|---|---|
| Native | No height or width ❌ | No border ✅ |
| Skia | Has height and width ✅ | Has border ❌ |
Tested with: Templates/SDK: 6.0.123 (which uses Uno version 6.0.778) Platform(s): Wasm IDE: VS 2022 - 17.14.4 VS VSIX: 6.0.50 OS: Windows
I synced with Jerome and @MartinZikmund I will let you take a look at the details @rajamatt shared above, so it can continue to be improved in the upcoming versions
Just tested with latest dev packages (sdk 6.1.0-dev.235) and the iframe no longer has a border on Skia.
<iframe id="uno-90354" src="https://example.com/" style="background-color: transparent; border: 0px; position: absolute; left: 432px; top: 206px; width: 500px; height: 500px;"></iframe>
Skia screenshots (light and dark)
@MartinZikmund, @morning4coffe-dev, @rajamatt If I’m following correctly, the only remaining item is the fix for the iframe dimensions on Native, right? If that’s the case, perhaps we can close this issue and open a separate one specifically for what’s left on Native?
@MartinZikmund @agneszitte I have re-confirmed the behavior for native as well, I think we can close the issue now.
TL;DR; The resulting behavior is the same. Although width/height still doesn't appear on the iframe directly, the positioning stylings are applied on a parent div and the iframe is stretched inside. The implementation is different a little bit on the Skia side, where the stylings are applied on the iframe directly. Result of both native/skia with no width/height is the control being stretched across the layout. When setting some size, it correctly updates it. Example for native:
