html :

<div id="tab0" class="tab">
    <div class="iframe_overlay"></div>
    <iframe src="" width="884" height="591" scrolling="no"></iframe>
</div>


css:

.tab{
   position:relative;
   width:265px;170px;
}
.tab .iframe_overlay{
    position:absolute;
    z-index:95;
    left:0;top:0;
    height:100%;width:100%;
    background:#fff;
    opacity:0;
}
.tab iframe{
    position:relative;
    -webkit-transform: scale(0.3, 0.29);
    -moz-transform: scale(0.3, 0.29);
    transform: scale(0.3, 0.29);
    -moz-transform-origin:0 0;
    -webkit-transform-origin:0 0;
    transform-origin:0 0;
    position:relative;
    z-index:90;
}

Let's say you want to show thumbnails of your websites in your portfolio, but the sites update often and you don't really want to create a thumbnail each time?

There are a lot of services like thumbnalizr and others. I've tried to mess with them and they are slow and unresponsive, so why not offload this proccess to the client side instead?

Basically it's an iframe with transform:scale() added to it and an overlay to prevent clicking.

Currently been tested in webkits and safari

I've created this for my iPad Simulator for the safari app's tabs.

notice: I believe this is very cpu intensive, because basically the websites are running in the iframe, so for every "thumbnail" you have a browsing process I think. SO this is only proof of concept.