Make a scaled down, non-interactable <webview> without scrollbars appearing


#1

Hey,

So I’ve been working on a web browser type thing, but I’ve come across an issue. You see, I want my tabs to have a little miniaturized preview of what the page will look like, so first what I tried was to make a really small webview, but of course, it acted like a window of that small size, i.e. it didn’t scale everything down accordingly.
Here’s a GFY of what that looked like.

Then I did what everyone does and tried bodging it in somehow, in this case I transform:scale()d it down from a roughly 1600x900 block. The issue now is that it hasn’t actually downscaled it all the way, for some reason it’s given it scrollbars still, even though 900p is more than enough to fit Google in. Regardless, I wouldn’t want scrollbars like this anyway, and plus a huge invisible chunk of it is over the page and gets in the way when you try interacting with it.
Hear’s a GFY of what that looked like.

There’s not much code I can show you, but here’s all I got that’s relevant;

HTML

        <div class="tabs">
            <div class="tab">
              <div class="tabInner" src="https://www.google.com">
                <webview src="https://www.google.com/" id="tabPreview">

                </webview>
              </div>
              <div class="tabTitle">
                Untitled
              </div>
            </div>
        </div>

CSS

* {
  margin: 0;
  transition: 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
}
.tabs {
  position: absolute;
  opacity: 0;
    width: 300px;
    transform:translateX(-290px);
    height: 100%;
    color: white;
    z-index: 999;
}

.tabs:hover {
  position: absolute;
    width: 300px;
    opacity: 1;
    background: black;
    transform:translateX(0);
}

.tab {
  width: 90%;
    height: 200px;
    background: #222;
    margin: 5%;
}
.tabInner {
    background: red;
    width: 100%;
    height: 75%;
    overflow: hidden;
}
.tabInner webview {
  display: flex;
  width: 1685px;
  height: 940px;
  position: absolute;
    transform: scale(0.4);
  transform-origin: 0 0;
  pointer-events: none;
}
.tabInner webview * {
  pointer-events: none;
}
.tabInner webview body {
}
.tabTitle {
    height: 25%;
    color: white;
    text-align: center;
    line-height: 50px;
}

#2

You could generate images based on those other pages. dom-to-image says that it can convert to SVG, which I think would be perfect for you.


#3

Alright, I’ll see if that works.