Webview: Background not applied? #5038
Comments
|
I don't see that @bpasero Can you inspect how large the web view is drawn? And also how large the iframe is? |
|
@jrieken I verified that the webview itself is as large as the editor, so it must be the content within. Can you share with me how to show dev tools for the web view? |
|
My extension btw: /*---------------------------------------------------------
* Copyright (C) Microsoft Corporation. All rights reserved.
*--------------------------------------------------------*/
'use strict';
import * as vscode from 'vscode';
export function activate(context: vscode.ExtensionContext) {
let previewUri = vscode.Uri.parse('css-preview://authority/css-preview');
class TextDocumentContentProvider implements vscode.TextDocumentContentProvider {
private _onDidChange = new vscode.EventEmitter<vscode.Uri>();
public provideTextDocumentContent(uri: vscode.Uri): string {
// return `<html>
// <body>
// <div>Preview of the CSS properties</dev>
// <hr>
// <div id="el">Lorem ipsum dolor sit amet, mi et mauris nec ac luctus lorem, proin leo nulla integer metus vestibulum lobortis, eget</div>
// </body>
// </html>`;
return "hello world"
}
get onDidChange(): vscode.Event<vscode.Uri> {
return this._onDidChange.event;
}
public update(uri: vscode.Uri) {
this._onDidChange.fire(uri);
}
}
let provider = new TextDocumentContentProvider();
let registration = vscode.workspace.registerTextDocumentContentProvider('css-preview', provider);
vscode.workspace.onDidChangeTextDocument((e: vscode.TextDocumentChangeEvent) => {
if (e.document === vscode.window.activeTextEditor.document) {
provider.update(previewUri);
}
});
vscode.window.onDidChangeTextEditorSelection((e: vscode.TextEditorSelectionChangeEvent) => {
if (e.textEditor === vscode.window.activeTextEditor) {
provider.update(previewUri);
}
})
let disposable = vscode.commands.registerCommand('extension.showCssPropertyPreview', () => {
return vscode.commands.executeCommand('vscode.previewHtml', previewUri, vscode.ViewColumn.Two).then((success) => {
}, (reason) => {
vscode.window.showErrorMessage(reason);
});
});
context.subscriptions.push(disposable, registration);
}
export function deactivate() {
} |
|
There is something to uncomment in |
|
Weird, now I don't see it at home. Will check tomorrow at work... |
|
funky. I see it a little when resizing because the webview-body isn't styled, only the iframe. Maybe a resize event got lost - didn't make it to the iframe... |
|
There is another issue where the background color of a webview is always white. I think this got fixed in newer versions of Electron though and might help us: https://github.com/electron/electron/releases/tag/v0.37.3 |
|
This seems to be related to the fact that I am running with |
jrieken
added
the
upstream
|
This is better with the latest Electron update but initially, when loading the web view I still see a short flicker of white background, no matter if I statically set the background color to transparent or black etc |
|
@jrieken ok, maybe follow up with Electron if you think webview should not have this flicker, I know that for the window itself they did quite some work for me to set the background color very early, even before the DOM gets any chance to set it. |
|
I might be able to workaround this by playing with |
|
This is also an issue for #6106. |
|
Closing since we managed to workaround this using an opacity trick |
I have a simple document provider just returning "Hello World" and it looks like the background of the web view is not fully applied?
The text was updated successfully, but these errors were encountered: