Gradient background for iframe not working

asked 2014-04-21 05:28:16 +0800

cotupha
23 ● 5

Hi everyone!

I have a two components that share a lot of content, so I use a common zul file for defining the shared content and then separate zul files for the details of each of these components. Both components are divs using vlayout.

I defined a gradient background for the body tag in the css for these components (I also use common css for the styling that both components share and separte css for the details that change). The definition is

body, html {
    background: #0099cc; /* Old browsers */
    background: -moz-linear-gradient(top,  #0099cc 0%, #ff9933 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0099cc), color-stop(100%,#ff9933)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #0099cc 0%,#ff9933 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #0099cc 0%,#ff9933 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #0099cc 0%,#ff9933 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #0099cc 0%,#ff9933 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0099cc', endColorstr='#ff9933',GradientType=0 ); /* IE6-9 */
    color: #BC6C25;}

(Generated with colorzilla)

One of the components is always displayed as a page on its own and the other one inside an iframe. Ok, let's focus only on the iframe one. The general structure is:

<?component name="sharedContentCanCauseOverflow" macroURI="/url/to/shared.zul" inline="true" ?>
<div apply="MyComposerForDiv" align="middle" hflex="1" vflex="1">
<vlayout>
    <space height="15px"/>
    <image src="/my-logo.jpg" width="740px" height="42px"/>
    <sharedContentCanCauseOverflow/>
    <space height="10px"/>
        <hlayout spacing="8px">
            <button id="back" label="one button" autodisable="true"/>
            <button id="next" label="another button" autodisable="true"/>
        </hlayout>
        <space height="15px"/>
        <hlayout width="70%">
            <label value="The footer"/>
        </hlayout>
</vlayout>
</div>

which I set as src of an iframe.

If the content of the iframe fits perfectly, then there's no problem with the background, but when the content is higher and a scrollbar appears, then the content that overflows the iframe does not have the desired background, i.e. just the initially visible part has the right background and then, the part that appears when I scroll, just has a plain blue background. I hope I am being clear.

If I show the exact same component outside the iframe it works fine (the content doesn't overflow, I guess that's why it works), but if I activate chrome dev tools, as the available space shrinks and the content overflows, then the background is not shown as expected.

Also, if I change the background of the main div, then it works, but it shows a weird border (corresponding to the body, I guess) with the bad background.

Any idea on why this happens?