[CSS] Firefox tekent iframe in div raar - Softwareontwikkeling

woensdag 23 mei 2007 14:10

Acties:

Topicstarter

Op een pagina wil ik graag Google AdSense in een div.
Deze div (content) zit in een andere div (container) met overflow: hidden.
Met JavaScript scroll ik de content in de container.

Google AdSense plaatst een iframe op de pagina.
Dit iframe doet vreemd wanneer de content scrollt. Hij wordt af en toe door de pagina heen getekent.

Dit probleem treed op in Firefox 2.0.0.3, maar niet in Internet Explorer 6 of 7.

Op internet vind ik een enkeling met een vergelijkbaar probleem, maar nergens een oplossing.
Hopelijk heeft iemand hier er een.

Het probleem is aan te tonen met de volgende HTML:

HTML:

<html>
<head>
<title>Outer page</title>
</head>
<body>

<script>
function scrollIframe(scroll) {
    var iframe = document.getElementById('iframecontainer');

    if(iframe.style.top) {
        topp = parseInt(iframe.style.top);
    } else {
        topp = 0;
    }

    iframe.style.top = (topp + scroll) + "px";
}

function switchOverflow(hidden) {
    if(hidden) {
        document.getElementById('hider').style.overflow = 'hidden';
    } else { // auto
        document.getElementById('hider').style.overflow = 'auto';

        var iframe = document.getElementById('iframecontainer');
        iframe.style.top = "0px";
    }
    document.getElementById('btnauto').disabled = !hidden;
    document.getElementById('btnhidden').disabled = hidden;

    document.getElementById('btnup').disabled = !hidden;
    document.getElementById('btndown').disabled = !hidden;
}
</script>

<br/><br/><br/><br/><br/><br/><br/>
<div id="scroll" style="position: absolute; left: 320px">
<input id="btnup" type="button" value="scroll /\" onClick="scrollIframe(20)"/><br/>
<input id="btndown" type="button" value="scroll \/" onClick="scrollIframe(-20)"/><br/>
<br/>
<input id="btnauto" type="button" value="Overflow: auto" onClick="switchOverflow(false)"/>
<input id="btnhidden" type="button" value="Overflow: hidden" disabled onClick="switchOverflow(true)"/>

</div>
<div id="hider" style="width: 304px; height: 300px; border: 1px solid red; overflow: hidden">
<div id="iframecontainer" style="border: 1px solid blue; position: relative;">
<iframe width="300" height="5000" src="inner.html"></iframe>
</div>
</div>
<sub>Onderschrift</sub>

</body>
</html>

(online op: http://www.bleq.nl/projects/IframeOverflow/)

woensdag 23 mei 2007 15:56

Acties:

killercow

eth0

Hmm,

Dat lijkt me inderdaad niet wenselijk,
de overflow:hidden lijkt hier ook niet te werken (ff 2.0.0.3 op linux)

Vreemdgenoeg wordt de border van de iframecontainer niet getekend, daar geld de overflow dus wel op.

Had je al in bugzilla gezocht?

openkat.nl al gezien?

woensdag 23 mei 2007 16:08

Acties:

Fl4sh3r

Topicstarter

Hij staat inderdaad in Bugzilla (https://bugzilla.mozilla.org/show_bug.cgi?id=302380)
al sinds voor Firefox 1.5... (27-07-2005)

Er staat ook een workaround in de reacties, dus die ga ik eens proberen.

woensdag 23 mei 2007 16:56

Acties:

killercow

eth0

Fl4sh3r schreef op woensdag 23 mei 2007 @ 16:08:
Hij staat inderdaad in Bugzilla (https://bugzilla.mozilla.org/show_bug.cgi?id=302380)
al sinds voor Firefox 1.5... (27-07-2005)

Er staat ook een workaround in de reacties, dus die ga ik eens proberen.

Maar eens op voten dan,
Misschien dan de 3.0 branch hem wel opgelost heeft?
Zo niet kunnen we hem misschien nominaten voor fix in gecko 1.9+

openkat.nl al gezien?