I have an overlay that gets triggered by JS with some scrolling content inside the overlay. There are also a couple of embedded youtube videos on the page. The problem I am having is that the content in the overlay doesn’t scroll in Chrome. It works correctly in all other browsers. I do have wmode=opaque added to both youtube videos (tried wmode=transparent as well). If I remove both videos, scrolling starts working in Chrome too.
Thanks
Here’s the overlay:
<div class="contact-overlay"><a class="close" href="#">X CLOSE</a><h3>Testimonials</h3><div class="content testimonials">
<h4 class="testimonials">See what our <span>satisfied customers</span> have to say:</h4>
<p>a lot of text</p>
Styles:
.contact-overlay { position: absolute; width: 640px; height: 730px; margin-left: -320px; left: 50%; top: 50px; background: #ffffff; z-index: 500; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; }
.contact-overlay a.close { font-family: "Arial Black", Gadget, sans-serif; color: #da3407; text-decoration: none; position: absolute; top: 5px; right: 10px; font-size: 18px; }
.contact-overlay .content { overflow: auto; height: 550px; width: 590px; margin-left: 25px; }
.contact-overlay .content.testimonials { margin-top: 30px; }
The site is being developed locally, so there’s no link. Sorry.
I ended up using JS to remove youtube videos and replace them with screenshots when the overlay is activated, then put them back on when the overlay is closed.