javascript - 包含 foreignObject 的可滚动 SVG 中的错误

Question

我创建了一个 SVG，它使用此处的滚动条滚动:

http://www.dotuscomus.com/svg/lib/library.html#innerscroll_full

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

编辑(清晰度): 这发生在 Chrome(最新版本)中；它在 Firefox 中运行良好(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 Chrome 中关于显示已翻译的外来对象的错误有关。如果我只是手动翻译 foreignObject 元素(例如，我只是将 transform="translate(50)"添加到源代码)，它会显示相同的错误。

Answer 1

显然这是 Webkit 中的一个错误，但强制浏览器重绘 SVG 可能会有所帮助。

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