I have created an SVG, which scrolls using the scrollbar found here:
http://www.dotuscomus.com/svg/lib/library.html#innerscroll_full
Within the SVG I have an interactive foreignObject, which is essentially an iframe containing an HTML form. The scrolling works fine, but when the SVG is scrolled, it seems as though the form's mouse positions aren't refreshed; that is, the form appears to scroll, but you have to click on where the elements were, rather than where they are. How might I be able to fix this?
EDIT (clarity): This is happening in Chrome (latest version); it works fine in Firefox (IE not relevant since there's no support for foreignObject anyways).
Relevant code in the SVG:
<foreignObject x="0" y="0" width="700" height="550" id="samp01">
<iframe xmlns="http://www.w3.org/1999/xhtml" src="question-samp01.html" seamless="seamless" style="overflow:hidden;padding:0;margin:0;border:0;" width="700" height="550"> </iframe>
</foreignObject>
The (relevant) HTML:
<div class="question-wrapper multiple-choice" id="samp01">
<form class="tutor" name="samp01" onsubmit="return check($('#samp01'));">
<p class="question">The universal gas constant is approximately 0.0821 L atm mol<sup>-1</sup> K<sup>-1</sup>. How many significant figures are given here?</p>
<ol class="multiple-choice">
<li>
<label for="samp01"><input type="radio" name="samp01" value="A"> 3</label>
</li>
<li>
<label for="samp01"><input type="radio" name="samp01" value="B"> 4</label>
</li>
<li>
<label for="samp01"><input type="radio" name="samp01" value="C"> 5</label>
</li>
</ol>
<input type="submit" value="Check" class="submit">
</form>
</div>
EDIT 2: It appears that this is related to a bug in Google Chrome with regards to displaying translated foreignObjects. If I just translate the foreignObject element manually (as in, I just add transform="translate(50)" to the source code), it displays the same error.
