Chrome overflow:hidden & iframe BUG

Question

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!

Answer 1

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

Answer 2

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.

Answer 3

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