[Webkit-unassigned] [Bug 88276] New: Width does not stop increasing once max-height is reached

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=88276

           Summary: Width does not stop increasing once max-height is
                    reached
           Product: WebKit
           Version: 528+ (Nightly build)
          Platform: Macintosh Intel
        OS/Version: Mac OS X 10.7
            Status: UNCONFIRMED
          Severity: Normal
          Priority: P2
         Component: New Bugs
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: andrew at harrison.org


We've found a rendering bug that seems to be triggered when an image has a max-height: the width doesn't stop when the window is resized. 

This is present in the latest WebKit nightly (r119424, June 4) as well as Chrome v19 - this bug has been reported to Google as well. The latest version of Safari does not have this bug and it is not present in any other non-Webkit browsers.

Relevant code snippets are below with descriptions. I am happy to provide more details if required.

We are using a "lightbox" style popover:

        <div id="galleryOverlay">
            <div class="overlaycontent">
                <a href="#closegallery" class="overlayclose">close</a>
                <h2>Gallery</h2>
                <div id="gallerymainimage"><img src="gallery/image-gallery-01.jpg" alt="Alt Text"></div>
                <div id="gallerythumbcontainer">
                    <a href="#" id="thumbprev">Previous</a>
                    <ul id="gallerythumbs">
                        <li><a href="gallery/image-gallery-01.jpg"><img src="=gallery/thumb-image-gallery-01.jpg" alt="#1"></a></li>
                        <li><a href="gallery/image-gallery-02.jpg"><img src="=gallery/thumb-image-gallery-02.jpg" alt="#2"></a></li>
                        <li><a href="gallery/image-gallery-03.jpg"><img src="=gallery/thumb-image-gallery-03.jpg" alt="#3"></a></li>
                        <li><a href="gallery/image-gallery-04.jpg"><img src="=gallery/thumb-image-gallery-04.jpg" alt="#4"></a></li>
                        <li><a href="gallery/image-gallery-05.jpg"><img src="=gallery/thumb-image-gallery-05.jpg" alt="#5"></a></li>
                        <li><a href="gallery/image-gallery-06.jpg"><img src="=gallery/thumb-image-gallery-06.jpg" alt="#6"></a></li>
                        <li><a href="gallery/image-gallery-07.jpg"><img src="=gallery/thumb-image-gallery-07.jpg" alt="#11"></a></li>
                        <li><a href="gallery/image-gallery-08.jpg"><img src="=gallery/thumb-image-gallery-08.jpg" alt="#21"></a></li>
                        <li><a href="gallery/image-gallery-09.jpg"><img src="=gallery/thumb-image-gallery-09.jpg" alt="#31"></a></li>
                        <li><a href="gallery/image-gallery-10.jpg"><img src="=gallery/thumb-image-gallery-10.jpg" alt="#41"></a></li>
                        <li><a href="gallery/image-gallery-11.jpg"><img src="=gallery/thumb-image-gallery-11.jpg" alt="#51"></a></li>
                    </ul>
                    <a href="#" id="thumbnext">Next</a>
                </div>
            </div>
        </div>


This is the CSS for the container for the popover that also serves as the background:

#galleryOverlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url(../images/overlay-bg.png);
z-index: 12345;
display: none;
}

This is the popover content container which has a fixed width, percentage height with a max-height:

#galleryOverlay .overlaycontent {
position: relative;
width: 860px;
height: 84%;
max-height: 550px;
margin: 1% auto;
padding: 1%;
background: #383838;
border: 2px solid white;
border-radius: 0.6em;
text-align: center;
}

It's an image gallery, so we have a main image in a container and a list (<ul>) of other images in the gallery . The main image container is as follows:

#gallerymainimage {
height: 70%;
max-height: 400px;
padding-top: 1%;
margin-bottom: 1%;
border-top: 1px dotted  #A6A6A6;
width: 100%;
}

And the image itself resizes to fit that container, based on the height:

#gallerymainimage img {
height: 100%;
max-height: 400px;
padding: 0;
width: auto;
max-width: 100%;
}

The bug happens when the height of the viewport goes over the max-height of the image (calculated at 100% of the container, which is 70% of the popover, which is 84% or 550px of the viewport). The height stops as expected, but the width of the image does not, resulting in a distorted image. For the most part this doesn't show up, but I'm using a 27" monitor with a height of 1440px so can see the buig quite easily).

This screenshot shows the incorrect behaviour in the full viewport in Chrome v19: http://dl.dropbox.com/u/709013/Screenshots/webkit%20bug%20-%20full%20height%20viewport.png (the same behaviour occurs in the WebKit nightly).

This screenshot shows the same size viewport in Safari v5.1.7 with the correct behaviour: http://dl.dropbox.com/u/709013/Screenshots/webkit%20bug%20-%20full%20height%20viewport%20in%20safari.png (the same occurs in non-Webkit browsers).

It appears it is a calculation issue, as the computed style in Safari shows that the width stops at 601px: http://dl.dropbox.com/u/709013/Screenshots/webkit%20bug%20-%20computed%20style%20safari.png but in Chrome it increases indefinitely (until the upper limit of the viewport is reached): http://dl.dropbox.com/u/709013/Screenshots/webkit%20bug%20-%20computed%20style%20chrome.png

-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.