SVG foreignObject ведет себя так, как будто он абсолютно позиционируется в браузерах Webkit

Я работаю с SVG в HTML-документе. По какой-либо причине в Chrome любой контент в любом элементе <foreignObject> появляется в верхнем левом углу родительского элемента элемента <svg>; как будто элемент <foreignObject> был абсолютно позиционирован или что-то в этом роде. У меня нет этой проблемы в Firefox.

Что может быть причиной этого? Как я могу это исправить?

Вот мой тестовый пример: (пример также находится в JsFiddle)

<!DOCTYPE html>
<html>
<head>
<title>SVG bug in Chrome?</title>
<style type="text/css">
code {
    background: #FFFAEE;
}
pre code {
    display:block;
}
.widget-body {
    background:yellow;
    position: relative; /* This is the problem! */
}
</style>
<body>
<h1>SVG bug in Chrome?</h1>
<div>
    <p>
        The elemts in the &lt;foreignObject&gt; are not positioned properly unless the <code>.widget-body</code> rule is changed to:
                <pre><code>.widget-body {
    background:yellow;
/*  position: relative; /* This is the problem! */
    position: static;
}</code></pre>
    </p>
        <h2>The Example:</h2>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1000" height="800">
    <g>
    <g transform="scale(1) translate(100, 200)" style="cursor: move;"><foreignobject pointer-events="fill" width="300" height="350">
    <body xmlns="http://www.w3.org/1999/xhtml" style="margin: 0px; height: 100%;">
    <table style="border-collapse: collapse; font-size: 11px; color: rgb(119, 68, 0); font-family: Arial,Helvetica; font-weight: normal; border-style: none;">
    <tbody>
    <tr>
        <td style="text-align: center; vertical-align: middle; white-space: nowrap;">
            <div style="width:300px;height:350px;position:static;">
                <div class="widget" style="width: 300px;">
                    <div style="-moz-user-select: none;">
                        <span>My Widget Title</span>
                    </div>
                    <div>
                        <div class="widget-body" style="width: 298px; height: 323px;">
                            <div style="width: 298px; height: 323px;">
                                <div style="width: 298px; height: 323px;">
                                    This position of this yellow square <br />should approximately (100, 200)
                                    <div style="position:absolute;bottom:0;right:0;background:red;color:white;font-weight:bold;">
                                        This red square <br />should be <br />in the bottom right corner <br />of the yellow square.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </td>
    </tr>
    </tbody>
    </table>
    </body>
    </foreignobject></g>
    </g>
    </svg>
</div>
</body>
</html>

Что я ожидаю увидеть (что я вижу в FireFox):

То, что я получаю в Chrome (15.0.874.121 на Fedora и на планшете Android), таково:

У меня есть минимальный контроль над моим HTML-контентом, поскольку я использую JavaScript Framework для богатых приложений и ранее существующих виджетов.

Ответ 1

Эта проблема не относится к Chrome, поскольку я могу воспроизвести ее в Chrome 15.0.874.121 для Macintosh, а также в Safari 5.1.2. (Это также произошло в более старых версиях Firefox для Mac, таких как версия 3.6.8, но поведение в текущей версии верное.) Эта в настоящее время выдающаяся ошибка Webkit вероятно, станет причиной проблемы. Глобальные координаты неправильно используются для элементов внутри объекта foreignObject, что означает, что когда используется абсолютное позиционирование, эти элементы помещаются относительно основного документа, а не контейнера foreignObject, и, следовательно, SVG-перевод не применяется к этим элементам.

Мне не удалось найти общее решение этой проблемы.

В этом конкретном примере это исправит макет во всех вышеупомянутых браузерах:

.widget {
    position: relative;
    left: 100px;
    top: 200px;
}

Демонстрация на jsfiddle.

Ответ 2

position: fixed; решил проблему для меня.