Не загружает svg mozilla

Обновлено: 04.07.2024

SVG удивительная технология, не в последнюю очередь благодаря своим оригинальным подводным камням. Если вы начали работать с SVG — скучно точно не будет.

Парочка свежих проблем была обнаружена при взаимодействии SVG с Angular, причем они возникали только в Firefox. Я решила описать проблемы и их решения здесь: себе на память, другим на пользу.

Проблема № 1.

Дано: SVG-иконки, подключаемые через use в нужные места страницы. Конструкция работает как часы во всех современных браузерах, но тут приходит Angular и меняет base . Во всех браузерах всё работает, кроме Firefox: в нем иконки исчезают, но только в случае, если ссылка в base не совпадает с адресом текущей страницы.

Про это даже есть баг от 2011 года, но проблема до сих пор существует.

Демо (смотреть в Firefox):

Оба кружка находятся внутри одного SVG, по нажатию на кнопку он полностью копируется. Голубой кружок слева — просто фигура, чтобы видеть, что в SVG вообще что-то есть. Красный кружок справа — символ, вставленный через use . Символ объявлен выше внутри того же SVG.

Решение: если добавить тегу SVG атрибут xml:base и в нем задать URL текущей страницы, иконки начинают работать вне зависимости от ссылки в base .

Проверьте в Firefox:

Проблема № 2.

Иконки, отрисовываемые внутри ng-repeat , могут не отображаться на странице. Код корректный, он есть на странице, но в use ничего нет, хотя тот же код, вынесенный из ng-repeat , прекрасно работает.

Взять содержимое атрибута xlink:href элемента use .
Очистить xlink:href .
Вставить в xlink:href старое значение.

После этого иконки начинают отображаться.

Способ странный, но он работает.

По правде сказать, оба решения выглядят не очень изящно, и всем было бы гораздо проще, если бы SVG в Firefox просто вел себя как в других браузерах, но вот нет.

Если вы знаете более красивые способы решить эти проблемы, расскажите мне о них, пожалуйста.

Я не могу отобразить свое svn-изображение в Firefox . он отлично работает в Safari и Chrome (у меня нет IE, поэтому еще не тестировал).

В моем html это реализовано так;

Img src = "/ images / logo6.svg"

Где logo1 - это просто класс для позиционирования.

Я пытался погуглить, но только что обнаружил, что провисание не поддерживается Firefox, но, тем не менее, есть способы его отобразить. Однако все решения было действительно трудно понять. (Я не программист!)

Есть ли простые способы сделать это?

4 ответа

Вы нигде не указываете размер SVG. В вашем классе logo1 вы указываете 100%, но на что скидка 100%? Chrome работает, потому что по умолчанию используется «неопределенный размер», ширина которого составляет 300 пикселей. Но Firefox использует 100% ширины родительского элемента ( <li> ), что составляет 0

Укажите реальную ширину и / или высоту в вашем классе logo1 , и все должно работать нормально в FF.

Я столкнулся с проблемой рендеринга в Firefox (v58.0.2), когда display: flex в качестве родительского элемента SVG вызывал проблемы, например:

Удаление стиля display: flex в родительском div помогло решить проблему.

Вы можете проверить, не связана ли проблема с геометрией, попытавшись загрузить svg прямо в браузере. Если это не проблема с геометрией и svg не отображается сам по себе, вы определенно хотите проверить код svg на предмет виновных. Используя Inkscape, вы можете получить доступ к структуре XML в меню «Правка» -> «Редактор XML», но вы можете просто открыть файл svg (без сжатия) с помощью текстового редактора по вашему выбору - для сложных файлов svg это может быть более гибким инструментом. В svg для моего случая я "заимствовал" символическое устройство принтера из темы Paper, и оказалось, что слой, из которого я выполнял копирование / вставку, имел атрибут стиля с " display: inline-block ", который попал в мой собственный файл. Этот слой Chrome будет отображать нормально, но Firefox не отобразит его. Я удалил атрибут стиля и альта! Идет значок.

Firefox поддерживает svg. Вы можете использовать этот HTML-код, и он будет работать в firefox.

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

Наше приложение имеет некоторые динамические значки. Значки - это SVG. Они отображаются путем добавления div с заданной шириной и высотой и создания тега стиля в голове, содержащего URL-адрес значка в качестве фона атрибута div :: before-attribute. Вот рабочий пример, который намного яснее, чем мое описание ( также можно назвать скрипкой ).

HTML

CSS

Это работает отлично в большинстве случаев. Теперь для одного из наших клиентов, на котором запущена последняя версия Firefox ESR 60.1.0 без аддонов на значках Windows 7, не отображаются спорадически. Примерно каждые 500 обновлений один или несколько значков не отображаются. Там есть divs, там есть CSS, это правило применяется к div. Запрос на загрузку SVG с сервера отправляется и отвечает кодом состояния 200. SVG являются теми же, что были показаны 499 раз раньше и действительны. Несколько раз, когда вы нажимали кнопку «Обновить», значки кратковременно отображались до перезагрузки страницы. Я не мог воспроизвести проблему при использовании PNG вместо SVG.

Я подозревал, что это условие гонки между добавлением div и тегом стиля, но некоторые тесты подтвердили, что он работает независимо от того, что происходит первым.

Чтобы это было еще хуже, я не мог воспроизвести проблему на машинах моих или моих коллег, но на нескольких машинах на клиенте. Как я уже сказал, у меня здесь полная потеря, и каждая идея о том, что может сделать преступник, поможет.

HTML

CSS

Несколько постоянных пользователей SuperUser в настоящее время пытаются сузить сферу и причину этой проблемы. В настоящее время мы ищем желающих добровольцев заполнить форму здесь после выполнения следующего теста:

Мы пытаемся сузить симптомы и причины, чтобы обновить ошибку на баг-трекере Mozilla, чтобы разработчики Mozilla могли решить эту проблему. Мы делаем это специально, потому что это потенциально широкомасштабный, высокоприоритетный вопрос; любые веб-сайты, которые разрешают встраивание изображений, могут быть уязвимы для атаки типа «отказ в обслуживании», направленной против значительной части пользователей, посещающих страницу, если они начинают использоваться злонамеренно.

Обновление 29.11.2013: ошибка была изолирована до следующего:

Оригинальный вопрос:

Я использую Firefox firefox-25.0-3.fc19.x86_64 на Fedora 19 (ядро 3.11.9-200.fc19.x86_64). Если я открою эту ссылку с помощью Firefox, моя система перестает отвечать на запросы. Запуск htop на втором мониторе демонстрирует значительный всплеск использования памяти, мои 3954 МБ оперативной памяти сразу же полностью израсходуются, затем подкачка медленно заполняется, загрузка одного процессора возрастает до 100%, затем система перестает отвечать на запросы, мышь замедляется, htop требуется десятки секунд для обновления и т. д. Если я убью процесс FF, все вернется в нормальное состояние.

Даже если перезапуск FF в безопасном режиме с отключенными плагинами, поведение остается прежним. Я попробовал компьютер моего коллеги, и он имеет

8000 МБ ОЗУ, то же самое происходит (высокая загрузка памяти и 1 процессор достигает 100%), когда он достигает

4096 МБ, появляется диалоговое окно с просьбой убить Firefox (возможно, Firefox жестко закодирован для использовать только 4096 МБ?).

Если я использую плагин (quickjava) для отключения javascript, я могу открыть ссылку без проблем. Однако на компьютере моего коллеги это не сработает: я пробовал другие сайты, чтобы убедиться, что JS отключен, но проблема остается.

Что вызывает это?

ОБНОВЛЕНИЕ: проблема возникает при просмотре этого SVG.

1 ответ 1

Давайте разделим и победим

Отключить аппаратное ускорение

В FF перейдите в Edit -> Preferences, нажмите Advanced, затем на вкладке General в разделе Browsing снимите флажок «Использовать аппаратное ускорение, когда доступно».

Теперь попробуйте тот же сайт снова. Если вы не получаете перегрузку ЦП / памяти, то мы знаем, что проблема заключается либо в ускорении 2D Canvas GPU (либо в использовании Firefox, либо в графическом стеке бэкенда), либо в рендере SVG.

Если вы получаете ту же перегрузку CPU/ памяти с аппаратными средствами разгона отключена, то это может быть ошибка в SVG синтаксического анализа, который, вероятно , сделано в чистом программном обеспечении. Хотя, в этом случае, мы, вероятно, столкнемся с проблемой и в Windows, но это не так (тестирование на FF 24.1.0 в Windows было медленным, но не потребляло весь процессор и оперативную память, как у вас).

Я подозреваю какую-то утечку памяти в Mesa.

Еще несколько вещей, чтобы попробовать

Эти вещи дадут нам больше отладочной информации, чтобы понять, где именно проблема, но большинство из этих шагов сосредоточены вокруг предположения, что проблема в графическом стеке. Если это не так, большая часть этого не будет полезна.

Обновление: я создал необработанную ссылку на github , в которой нет ни JavaScript, ни какого-либо дурачества; это просто список прачечной SVG. Это должно произойти сбой, если у вас есть дефектное поведение, и это устраняет все другие возможные источники проблемы.

Обновление 2: OP изолировал проблему для этого конкретного изображения.

Читайте также: