Высота SVG, неправильно рассчитанная в браузерах Webkit

У меня проблема с браузерами 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 (проверена ночная сборка уже, проблема сохраняется), но до того, как я ее запустил, я подумал, что нужно проверить, чтобы у кого-то еще не было решения.

Ответы

Ответ 1

svg { max-height: 100%; }

Ошибка WebKit, зарегистрированная здесь: https://bugs.webkit.org/show_bug.cgi?id=82489

Я также добавил обходной путь к трекеру ошибок.

Ответ 2

У меня была аналогичная проблема для Safari. Дело в том, что ширина и высота svg были отображены как атрибуты элемента dom (в моем случае width = "588.75px" height = "130px" ). Определение ширины и высоты в css не могло перезаписать эту настройку размера.

Чтобы исправить это для Safari, я удалил информацию о ширине и высоте из SVG файла, сохраняя при этом объект viewBox неповрежденным (вы можете редактировать файлы .svg с любым текстовым редактором).

Git фрагмент описания моего файла .svg:

    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 588.75 130"
-   height="130"
-   width="588.75"
    xml:space="preserve"
    version="1.1"

Ответ 3

Мне трудно понять, что вы хотите с вашим примером, или что не так, как вы намереваетесь. Однако, в общем случае, если вы используете макет с контейнерами с процентной шириной и высотой, и вы хотите, чтобы контент заполнял эти контейнеры, вам необходимо вывести их из потока (используя position:absolute для содержимого и position:relative или position:absolute на контейнерах).

Вот простой пример, который работает в Chrome и Safari:
http://phrogz.net/SVG/size-to-fill.xhtml

div #foo имеет высоту и ширину в процентах от тела. Он имеет красный фон, который никогда не будет виден, потому что SVG position:absolute внутри него и его полностью заполняет и имеет зеленый фон. Если вы когда-либо видели красный цвет, это ошибка.

#foo, svg { position:absolute }
#foo { left:20%; width:30%; top:5%; height:80%; background:red; }
svg  { top:0; left:0; width:100%; height:100%;  background:green; }

<div id="foo"><svg ...></svg></div>

Ответ 4

Это известная проблема, которая была исправлена ​​командой Chromium с версией 15.0.874.121. Я проверил это исправление только сегодня.

http://code.google.com/p/chromium/issues/detail?id=98951#c27

Ответ 5

Я знаю, как это исправить, вы должны просто положить это в начало вашего файла svg: "preserveAspectRatio =" xMinYMin none "он должен быть в теге svg, как это:

Проблема будет исправлена ​​

Ответ 6

Как ранее указывалось, масштабирование WebKit в SVG улучшилось в последнее время. По-моему, он по-прежнему сильно нарушен в текущем Safari (версия 5.1, WebKit 534). Я сделал несколько экспериментов и записал мои выводы на своем веб-сайте: http://www.vlado-do.de/svg_test/ Короче: вложение svg с <object> работает в большинстве случаев в WebKit 535. Для более старого WebKit я вставляю его в <img> тег. Это прекрасно, если вам не нужны ссылки внутри вашего svg (но он не работает в более раннем Gecko и, как ни странно, также проблематичен в текущем Chromium).

Ответ 7

Я просто установил высоту в очень большой размер в svg, чтобы сохранить соотношение сторон. Использование 100% связано со слишком большим количеством проблем. Это работает лучше для меня, потому что я не хотел использовать js.

Полные реквизиты для: http://www.seowarp.com/blog/2011/06/svg-scaling-problems-in-ie9-and-other-browsers/

width = "1200" height = "235.5"

Ответ 8

Я обнаружил, что добавление "position: absolute"; к элементу изображения (если он находится внутри родителя, который также абсолютно позиционирован), который вызывал мой .svg, сделал "height: 100%;" объявление становится относительно его контейнера, а не страницы/браузера/устройства.

Протестировано это как для Chrome, так и для Safari (mobile webkit) для iOS 7.1, и он исправил мою проблему (файл .svg шел вне своего контейнера).

Надеюсь, это несколько надежное решение для других, у кого были проблемы. Стоит сделать снимок?

Ответ 9

У меня возникла проблема с тем, что Javascript возвращал неверные значения высоты для SVG, и я нашел решение просто запустить мой script (бит, необходимый для доступа к высоте) на window.load, а не document.ready.

document.ready срабатывает, когда DOM готов, но изображения не обязательно отображались на этом этапе. В тот момент, когда срабатывает window.load, изображения будут загружены (и, следовательно, браузер сможет получить доступ к своим измерениям правильно).