I am facing an issue with webkit that seems to be caused by a bug in the rendering engine or a feature that I am unable to find a workaround for.
HTML:
<div id="left">
Content
</div>
<div id="right">
<div id="scroll">
<div class="video">
<!-- Flash -->
</div>
Sidebar
</div>
</div>
CSS:
#left {
float: left;
width: 50%;
}
#right {
float: right;
position: fixed;
right: 0;
width: 50%;
height: 100%;
}
#scroll {
overflow-y: auto;
position: absolute;
top: 0;
bottom: 0;
}
JSFiddle: http://jsfiddle.net/andrewryno/pUaM2/1/
The issue arises when there is a flash object inside a scrolling div with a fixed position. When you scroll, everything behaves as expected until you hover over the flash object. At that point, the flash grabs focus and starts scrolling the document instead of the div. This problem appears to occur only in webkit browsers.
The only solution I have discovered so far is wrapping the flash in another div (.video in the provided HTML) and adding:
.video {
position: relative;
z-index: -1;
}
However, this fix moves the flash/div behind its parent, making it visible but uninteractive while still allowing scrolling to function properly.
Is there a way to work around this issue? Removing the position: fixed; resolves the problem, indicating that it is related to the fixed position rather than focus stealing.
Update:
I have attempted several JavaScript solutions without success. The z-index "hack" involving changing between -1 and 0 on scroll start/stop did not work because jQuery does not recognize the scroll event when hovering over the flash. Similarly, covering the flash with a div and removing it on click does not work since the first click does not pass through (and JS cannot directly interact with the flash).