У меня проблема с браузерами Webkit (Safari и Chrome, на Mac и ПК).
Я использую Raphael JS для рендеринга SVG-данных и использования гибкого макета для масштабирования SVG с окном браузера. SVG устанавливаются на 100% ширины/высоты, используя JQuery. Содержащие элементы имеют ширину, заданную в процентах, чтобы поддерживать соотношение макета при изменении размера страницы.
Проблема: Webkit не правильно вычисляет высоту, добавляет дополнительные пиксели (иногда сотни) вокруг изображения SVG; который разбивает макет.
Если вы откроете следующую ссылку в браузере Webkit, вы увидите зеленые дополнительные пиксельные области. Если вы используете инспектор разработчика в сафари, вы увидите, что размер отчета для SVG больше, чем отображается SVG.
http://e-st.glam.ac.uk/simulationgames/svgheightbug/index.html
Если вы откроете ссылку в Firefox или Opera, вы увидите макет, как он должен работать (зеленый здесь вызван полями, которые я намеренно установил).
В IE8 была аналогичная проблема, использующая height: auto fixed, но это не будет работать в Webkit.
У кого-нибудь еще была эта проблема? У кого-нибудь есть решение?
Я думаю, что это может быть ошибка Webkit (проверена ночная сборка уже, проблема сохраняется), но до того, как я ее запустил, я подумал, что нужно проверить, чтобы у кого-то еще не было решения.