包含foreignObject的可滚动SVG中的Bugs

Question

我已经创建了一个SVG，它使用以下滚动条滚动：

full

在SVG中，我有一个交互式的foreignObject，它本质上是一个包含一个HTML的iframe。滚动很好，但是当SVG被滚动时，似乎表单的鼠标位置没有刷新；也就是说，表单看起来是滚动的，但是您必须单击元素所在的位置，而不是它们所在的位置。我怎么才能解决这个问题？

编辑(清晰)：这发生在Chrome (最新版本)；它在火狐运行良好(IE不相关，因为根本不支持foreignObject )。

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>

(相关的) 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>

编辑2:这似乎与Google中有关显示翻译后的foreignObjects的一个bug有关。如果我只是手动地翻译foreignObject元素(就像在源代码中添加transform=“transform=(50)”)，它会显示相同的错误。

Answer 1

显然，这是Webkit中的一个bug，但迫使浏览器重新绘制SVG可能会有所帮助。

尝试在它上添加一个随机类，或者在文档中追加一个空节点，或者添加一个空的style元素。