CSS фильтр заставляет элементы img менять координаты в Opera

Question

Я заметил это различное поведение между Chrome, Opera и Firefox.

Шаги для воспроизведения: элемент foreignObject в svg, с элементом img в качестве дочернего элемента.

Если я применяю css filter:#anyfilter или даже атрибут непрозрачности, img смещается в Opera.

Я заметил, что селектор -o-filter исчез.

<svg #NOTE: parent svg use translation>
...
<g class="nochildren">
<foreignObject width="400" height="300" x="-200" y="-40">
<img src="https://commons.wikimedia.org/w/thumb.php?width=100&amp;f=Arch illustration.svg">
<p>John T. Lyle</p>
</foreignObject></g>


#css

.nochildren img {
    filter: grayscale(0.30); # img will be displaced
    opacity: 0.7; # img will be displaced

}

Я пытался поиграться с позициями, но безуспешно.

Я использую его в конкретном случае для сложного интерфейса, однако я узнал, что фильтры добавляют ограничивающие рамки вокруг элементов:

Я хотел бы понять, есть ли способ обработки позиционирования при использовании фильтров для достижения согласованности между браузерами (здесь Opera, которая также использует -webkit)?

-

Ps Я не могу проверить на IE edge, однако надеюсь, что у меня не возникнет таких же проблем:

Безопасно ли использовать фильтры или вы предлагаете другие обходные пути для применения непрозрачности и декорирования к изображениям?

Примечание: я хочу сохранить как можно меньше html в моем g construct.

Ожидаемое поведение: