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!

---

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

---

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

---

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.