Use vscode1.91.0 for extension development and load the webview implemented by vue. Inline style does not take effect.

Type: Bug

I have a bug for vscode extension developers that needs to be fixed. When I was developing the vscode extension, when loading html through vscode's webview, the scrollbar style Settings on my web pages did not work after version 1.90.0, but the style of loading pages under version 1.8* did work.Thank you so much for your time.

1.Write a page with a scroll bar via vue or html, and set styles for this web page:

/* scrollbar */
    body *::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    }
    body *::-webkit-scrollbar-track {
    /* background: #fff;  * /
    border-radius: 2px;
    }
    body *::-webkit-scrollbar-thumb {
    /* background: rgb(205, 206, 206);  * /

    border-radius: 10px;
    }
    body *::-webkit-scrollbar-thumb:hover {
    filter: brightness(150%);
    /* background: var(--vscode-sideBar-background);  * /
    }

2. Create a extension project and use the webview component to load the web page;

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    context.subscriptions.push(
        vscode.commands.registerCommand('my-extension.openWebView', () => {
            const panel = vscode.window.createWebviewPanel(
                'webView', // Identifies the type of the webview. Used internally
                'My WebView', // Title of the panel displayed to the user
                vscode.ViewColumn.One, // Editor column to show the new webview panel in.
                {} // Webview options. More on these later.
            );

            // And set its HTML content
            panel.webview.html = getWebviewContent();
        })
    );
}

function getWebviewContent() {
    return `<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fixed Height Div with Scroll</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        .scrollable-div {
            height: 300px;
            overflow-y: auto;
            border: 1px solid #ccc;
            padding: 10px;
            box-sizing: border-box;
            white-space: pre-wrap; /* ensures that text wraps correctly */
        }
    </style>
</head>
<body>
    <div class="scrollable-div">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper arcu et nibh interdum, ut sagittis risus scelerisque. Aenean id quam in purus ultricies malesuada. Donec sit amet lacinia dui. Vivamus vehicula tristique metus, non pretium dui venenatis id. Sed sed ligula id orci tincidunt bibendum. Proin et dui non leo ultricies fermentum. Integer ut risus a ante accumsan efficitur et nec ligula. Suspendisse non nisi eget augue vehicula tincidunt. Pellentesque auctor diam in turpis varius, sit amet volutpat urna sollicitudin. Etiam non justo et eros vehicula scelerisque non non ligula. Integer blandit justo id tortor dapibus, nec fringilla risus fermentum. In hac habitasse platea dictumst. Suspendisse ut fringilla lacus. Nulla facilisi. Sed sit amet vehicula sem.
    </div>
</body>
</html>`;
}

// this method is called when your extension is deactivated
export function deactivate() {}

3. After packaging, launch the extension in vscode1.8 and 1.9 versions respectively. In the webview loading page, the vscode1.8* version is valid, but the vscode version after 1.90.0 is not valid.

This is a screenshot of the plugin launch in version 1.8*, the style Settings of scoller bar are in effect:
This is a screenshot of the plugin launch in version 1.9*, the style Settings of scoller bar are not in effect:

VS Code version: Code 1.91.0 (ea1445cc7016315d0f5728f8e8b12a45dc0a7286, 2024-07-01T18:52:22.949Z) OS version: Windows_NT x64 10.0.19045 Modes:

System Info

|Item|Value| |---|---| |CPUs|Intel(R) Core(TM) i7-10510U CPU @ 1.80GHz (8 x 2304)| |GPU Status|2d_canvas: enabled
canvas_oop_rasterization: enabled_on
direct_rendering_display_compositor: disabled_off_ok
gpu_compositing: enabled
multiple_raster_threads: enabled_on
opengl: enabled_on
rasterization: enabled
raw_draw: disabled_off_ok
skia_graphite: disabled_off
video_decode: enabled
video_encode: enabled
vulkan: disabled_off
webgl: enabled
webgl2: enabled
webgpu: enabled| |Load (avg)|undefined| |Memory (System)|15.78GB (2.71GB free)| |Process Argv|--crash-reporter-id bda4b216-3e53-4a37-b133-9812cc183beb| |Screen Reader|no| |VM|0%|

Extensions (20)

Extension|Author (truncated)|Version ---|---|--- tsl-problem-matcher|amo|0.6.2 vscode-eslint|dba|3.0.10 prettier-vscode|esb|10.4.0 LightCode|hun|1.1.1 vue|jcb|0.1.5 vscode-language-pack-zh-hans|MS-|1.91.2024071009 debugpy|ms-|2024.8.0 python|ms-|2024.10.0 vscode-pylance|ms-|2024.7.1 vscode-typescript-next|ms-|5.6.20240710 java|red|1.32.0 intellicode-api-usage-examples|Vis|0.2.8 vscodeintellicode|Vis|1.3.1 vscode-java-debug|vsc|0.58.0 vscode-java-dependency|vsc|0.23.7 vscode-java-pack|vsc|0.27.0 vscode-java-test|vsc|0.41.1 vscode-maven|vsc|0.44.0 volar|Vue|2.0.10 project-tree|zhu|0.3.0

A/B Experiments

``` vsliv368:30146709 vspor879:30202332 vspor708:30202333 vspor363:30204092 vscorecescf:30445987 vscod805:30301674 binariesv615:30325510 vsaa593:30376534 py29gd2263:31024239 c4g48928:30535728 azure-dev_surveyone:30548225 vscrpc:30673769 962ge761:30959799 pythongtdpath:30769146 pythonnoceb:30805159 asynctok:30898717 pythonregdiag2:30936856 pythonmypyd1:30879173 h48ei257:31000450 pythontbext0:30879054 dsvsc016:30899300 dsvsc017:30899301 dsvsc018:30899302 cppperfnew:31000557 dsvsc020:30976470 pythonait:31006305 dsvsc021:30996838 f3je6385:31013174 pythoncenvpt:31062603 a69g1124:31058053 dvdeprecation:31068756 dwnewjupytercf:31046870 2f103344:31071589 legacy_priority:31082724 pythonrstrctxtcf:31093870 ```

microsoft / vscode