Vscode: Webview: apply window.zoomLevel too

Created on 25 Apr 2016 · 18Comments · Source: microsoft/vscode

This is an electron bug: https://github.com/electron/electron/issues/7375

I am running with window.zoomLevel: 1 in VS Code and my markdown preview (https://github.com/bpasero/vscode-markdown) seems to show up with the default zoom level of 0:

bug electron upstream verified webview

Source

bpasero

👍19

Most helpful comment

* Workaround for the bug *

I've found a workaround that's reasonable for me for now -- use editor.fontSize in your settings.json to avoid having to zoom your editor, and a custom CSS file to set the Markdown body text and code text scaling to avoid having to zoom your Markdown preview. Then you can force both to be the zoom level you want, without the clipping.

Here's how in two simple steps:

In your settings.json (accessible via _File > Preferences > User Settings_), put the following:

{ "editor.fontSize": 20, "markdown.styles": ["d:\\somewhere\\your-markdown-style.css"], }

Change 20 to the value that works best for you.

Create the file d:\somewhere\your-markdown-style.css with the contents:

```
body {
font-size: 150%;
line-height: 150%;
}

code {
font-size: 90%;
line-height: 130%;
}
```

These control the Markdown preview. Tweak the percentages to what works well for you.

HTH.

hsutter on 1 Nov 2016

👍6 👎3 😄1

All 18 comments

Hm, weird. On the screenshot the zoom level looks ok, but not when I see it running here. It also seems to fix itself once I zoom in and out from the View menu. Might as well be a bug in the webview itself.

bpasero on 25 Apr 2016

I guess this issue is also related where the webview does not take the full width into account because I am zoomed in:

bpasero on 25 Apr 2016

👍3

hm... don't even know if I can set that on the web view or web contents...

jrieken on 25 Apr 2016

I have created https://github.com/electron/electron/issues/5312 to track this with electron

jrieken on 27 Apr 2016

It now depends on us updating Electron. @bpasero is that on the plan for July?

jrieken on 1 Jul 2016

@jrieken yes 👍

bpasero on 1 Jul 2016

🎉2

Should be ok now with Electron 1.2.6.

bpasero on 6 Jul 2016

🎉3

While the zooming now seems to be applied to the webview, the scrollbar is still behaving weird and shows off:

bpasero on 14 Sep 2016

Yeah - the size is now totally wrong...

jrieken on 20 Sep 2016

This issue also affects in-product Release Notes and I think the plan is for them to be visible by default in the October release. @jrieken @bpasero. Should we label this issue as important?

gregvanl on 6 Oct 2016

👍2

@gregvanl well I am not sure how this would help solve the issue, in the end its an electron bug: https://github.com/electron/electron/issues/7375

bpasero on 7 Oct 2016

@bpasero I see so there's nothing we can do on our side. I just wanted to raise awareness that this will be very visible once we show the release notes automatically on startup in October.
I was worried this was an accessibility issue for people with poor eyesight who have zoomed their VS Code but all the text is still there. The window is smaller than the editor region but the text isn't clipped.

gregvanl on 7 Oct 2016

If it's possible to revert the behavior to the previous bug, which had a workaround, that would be a great improvement:

Before I updated today, I simply worked around the bug by hitting Ctrl+- then Ctrl+= again (one smaller, one bigger) and the preview fixed itself.
Now my only workaround is to open two instances of Code just so that I can zoom my editor in one and not zoom the preview in the other. That "works" but is still worse than before because the preview still is not zoomed so it's tiny, but at least it isn't clipped.

So the previous bug was better, if it would be convenient to give us that bug back please...

(While I understand release notes might also be a driver, which is great to raise this bug's priority, just MD editing by itself is a very common use out here... this is already very visible to anyone who edits MD, presumably you have the stats on that.)

hsutter on 13 Oct 2016

👍1

(sarcasm)
Hey, cool! It's worse now! I just updated VS Code (to 1.6.1) and now the Preview window cannot be made to fill the entire window space.
(/sarcasm)

But seriously..this does make VS code less useful to me so I'm giving a couple of Markdown extensions a try instead. If I can find one that works there'll be no point me using VS code at all.

The window is smaller than the editor region but the text isn't clipped.

Not clipped, no. But it's not a very helpful preview. With my setup the preview only shows 12 lines and about 50 characters per line. That's not really representative of what users will see. If you made it render as green writing on a black background it'd look like the green screens I used to use in the 1980s :-/

AndrueCope on 20 Oct 2016