Chrome overflow:hidden & iframe BUG

问题:

I have a BUG related to Iframes / Youtube Videos & Chrome...

Got a div

<div id="single">
      <div id="poza-mare">
        <div class="items">
              <div><iframe width="710" scrolling="no" height="360" frameborder="0" src="http://www.youtube.com/embed/CblqeBA0iIk" type="text/html"></iframe></div>
              <div>...</div>
              <div>...</div>
        </div>
      </div>
</div>

#poza-mare{position:relative;overflow:hidden;clear:both;height:360px;}
#poza-mare div {float:left;display:block;width:710px;}
#poza-mare .items {width:20000em;clear:both;margin:0;padding:0;position: absolute;}
#single{width:710px; overflow:hidden; margin:0 auto;z-index:2;}

Anyway, The div's in items class are animated by Scrollable jQuery and the iframe simply doesn't want to get hidden when it scroll to the left (it simply stays visible when everything else gets hidden). This only happens in Chrome, in Firefox / Safari / IE9 / Opera works perfectly.

What can I do to make it work? :(

Link: http://lesateliersnomad.com/showcase/2d-animation/artmania-festival-2010/

Thanks in advance!

回答1:

"?wmode=opaque" at the youtube video will fix the frame issue. :)

回答2:

Try fix it by adding { zoom: 0.99999 } before scrolling and after it make it { zoom: 1 } This hack helped me. :)

回答3:

As mentioned: overflow: hidden; doesn't work on Chrome with IFRAMEs?

All you need is the scrolling attribute <iframe scrolling='no' src='..'> </iframe>

Tested and worked.