Using Height: 'all' has a bug

tomerb15 commented 8 years ago

When using webShot on the following HTML: (The html is given to webShot as a String and not as a URL)

<html>
<head>
    <meta charset='UTF-8'>
    <style>            @font-face {
        font-family: OpenSansHebrewBold;
        src: url('fonts/OpenSansHebrew-Bold.ttf');
    }

    @font-face {
        font-family: OpenSansHebrew;
        src: url('fonts/OpenSansHebrew-Regular.ttf');
    }

    .container {
        width: 720px;
        background-color: white;
    }

    body {
        margin-top: 0px;
        margin-bottom: 0px;
        margin-left: 0px;
        margin-right: 0px;
    }

    .header {
        color: white;
        text-align: center;
        height: 50px;
        font-family: OpenSansHebrewBold;
        background-color: black;
    }

    .headerText {
        font-size: 36px;
    }

    .row {
        display: block;
        border-bottom: 1px solid black;
        text-align: right;
    }

    .itemImg {
        float: left;
        width: 221px;
    }

    .menuItem {
        display: inline-block;
        vertical-align: top;
        background-color: antiquewhite;
    }

    .itemHeader {
        font-family: OpenSansHebrewBold;
        font-size: 25px;
        padding-right: 5px;
        white-space: nowrap;
    }

    .itemDesc {
        font-family: OpenSansHebrew;
        font-size: 16px;
        height: 66px;
        overflow-y: hidden;
        padding-right: 5px;
    }

    .number {
        float: right;
        font-family: OpenSansHebrewBold;
        font-size: 100px;
        width: 120px;
        text-align: center;
    }

    .desc {
        width: 379px;
        float: right;
        background-color: white;
        text-align: right;
    }

    .footer {
        color: white;
        text-align: center;
        height: 50px;
        font-family: OpenSansHebrewBold;
        background-color: blue;
    }

    .footerText {
        font-size: 36px;
    }

    .price {
        font-family: OpenSansHebrewBold;
        font-size: 28px;
        height: 39px;
        text-align: center;
    }

    .leftCol {
        width: 750px;
    }

    .rightCol {
        float: right;
        width: 750px;
    }

    .emptyRow {
        height: 140px
    }

    .leftCol .row {
        text-align: left;
    }

    .rightCol .row {
        text-align: right;
    }    </style>
</head>
<body>
<div class='container'>
    <div class='header'>
        <div class='headerText'>header text</div>
    </div>
    <div class='row'>
        <div dir='rtl' class='menuItem'>
            <div class='number'>1</div>
            <div class='desc'>
                <div class='itemHeader'>גלידת שוקולד</div>
                <div class='itemDesc'></div>
                <div class='price' style='background-color: #7bb1f3'>מחיר: ₪28.00</div>
            </div>
            <img src='http://212.179.115.229/Up/Products/a4pvvu_IceCream_BJ_BIG6.jpg' class='itemImg'></div>
    </div>
    <div class='row'>
        <div dir='rtl' class='menuItem'>
            <div class='number'>2</div>
            <div class='desc'>
                <div class='itemHeader'>גלידת קרם עוגיות</div>
                <div class='itemDesc'></div>
                <div class='price' style='background-color: #7bb1f3'>מחיר: ₪28.00</div>
            </div>
            <img src='http://212.179.115.229/Up/Products/cfpnbk_IceCream_BJ_BIG4.jpg' class='itemImg'></div>
    </div>
    <div class='row'>
        <div dir='rtl' class='menuItem'>
            <div class='number'>3</div>
            <div class='desc'>
                <div class='itemHeader'>גלידת וניל</div>
                <div class='itemDesc'></div>
                <div class='price' style='background-color: #7bb1f3'>מחיר: ₪28.00</div>
            </div>
            <img src='http://212.179.115.229/Up/Products/vfh4hl_IceCream_BJ_BIG5.jpg' class='itemImg'></div>
    </div>
    <div class='row'>
        <div dir='rtl' class='menuItem'>
            <div class='number'>4</div>
            <div class='desc'>
                <div class='itemHeader'>דולצה דה לצה</div>
                <div class='itemDesc'></div>
                <div class='price' style='background-color: #7bb1f3'>מחיר: ₪28.00</div>
            </div>
            <img src='http://212.179.115.229/Up/Products/mm6bk4_IceCream_BJ_BIG8.jpg' class='itemImg'></div>
    </div>
    <div class='footer'>
        <div class='footerText'>fotter text</div>
    </div>
</div>
</body>
</html>

With the options:

var webshotOptions = {
            siteType:'html',
            shotSize:{
                width: 720,
                height: 'all'
            },
            streamType: 'jpg'
        };

I'm getting a bug, the image is drawn with extra ~100px in black at the bottom.

Anybody has a clue why?

ya-kostik commented 7 years ago

Hello! Try to add body background-color to white.

telunc commented 7 years ago

I have this bug too.

ya-kostik commented 7 years ago

Did you try to add background-color: white to document body?

telunc commented 7 years ago

Yes, I did.

Revadike commented 6 years ago

Yeah, I too had the issue that the page height isn't detected properly. I had to use onLoadFinished to modify the page to make it so it does detect the proper height.

kmani314 commented 3 years ago

@Revadike I know this is an old thread, but how did you get this to work? What do you have to modify in onLoadFinished?

Revadike commented 3 years ago

I'm sorry, this it from 3 years ago. I tried looking, but I can't find this project anymore.

brenden / node-webshot

Using Height: 'all' has a bug #153