Как я могу принудительно установить абсолютную позицию в div внутри цепочки -webkit-transform?
Упрощенная форма моего оригинального вопроса. Учитывая приведенный ниже код (для Chrome/Safari), как я могу сделать так, чтобы "текст" во внутреннем div отображался вверху слева, не зная значений в матрице преобразования внешнего div?
<body>
<div style="-webkit-transform: matrix(1, 0, 0, 1, 100, 50);">
<div style='background-color: #f00; -webkit-transform: none; left: 0px; top: 0px; position: fixed'>text</div>
</div>
</body>
Неважно, что я пытаюсь сделать с точки зрения CSS, я не могу заставить внутренний div игнорировать внешнее transform(). Из спецификации это выглядит как -webkit-transform: никто не должен очищать стек преобразований и / или position: fixed; но у меня ничего не работает. Я пробовал связанный код в Firefox ("преобразование") с той же проблемой.
Исходная формулировка: я пытаюсь использовать D3JS для рисования в SVG-контейнер, который настроен как google.maps.OverlayView и расположен прямо над моим контейнером карты Google, оба фиксированных положения 600x400 в левом верхнем углу. Вы можете увидеть код в GIST здесь.
Это работает нормально, пока вы не перетаскиваете карту, после чего она перемещает мой SVG-контейнер, по-видимому, из-за -webkit-transform: matrix(...) в одном из родительских элементов div: если я отключу эту строку в Chrome DevTools Мое наложение возвращается в нужное место. Мне нужно, чтобы оверлейный вид оставался выровненным с окном просмотра карты, так как я обновляю содержимое при перемещении карты.