Почему картинка вставленная через picture растягивается на неопределенную ширину в firefox?

Question

[Вячеслав Яшников]

Наблюдаю такую странную шуку - создаю блок внутри которого есть контент и картинка, картинка позиционируется по правой стороне через

position: absolute;
right:0;
top:0;
bottom:0;

в Гугл хром отображается все корректно:


В Firefox элемент picture почему-то растягивается и занимает большую часть контейнера где он лежит


тегу picture задал синий фон для наглядности, пример с кодом ниже:


Как это исправить и почему это происходит?

Answer 1

[Ankhena]

Это увлекательная история.
Вот представьте себя на месте браузера.
Что видите в коде:
Картинка должна занять 100% высоты и width auto.
Как будете рисовать высоту, если у родителя картинки высота тоже 100%, у его родителя тоже нет и т.д. до самого верха. От чего считать проценты? Вроде есть какой-то намек из top 0 и bottom 0. Не прямой, конечно, но хоть что-то.
Теперь про ширину: написано нарисуй авто. Размер в атрибуте не задан, но можно посмотреть, что там у файла. И хотелось бы сохранить пропорции.
Следующий этап размышлений о том, что делать с picture. Вроде надо растянуть по содержимому, но у него auto, которым и так сложно решить что делать.

Как рисовать будете? Как догадаетесь что хотел сказать верстальщик, если у браузера нет возможности заглянуть ни к вам в голову ни в макет?

Ну вот FF берет в качестве ширины для picture исходную ширину картинки.

Всё это о том, что когда нет четких инструкций что делать, браузер пытается как-то интерпретировать написанное. Разные браузеры будут делать это по-разному. Причем с течением времени это поведение может меняться.

Как исправить:
Вариант 1 (похуже)
Тег picture тег с особенностями и ещё и часто не известно, будет ли он вообще в разметке или клиенты его потеряют.
Поэтому самое умное, что можно ему задать это display: contents;, чтобы не мешался.
И дальше работать с оберткой. Тут вариантов много. Например, задать пропорции, а картинке object-fit. Правда у FF есть проблемы с aspect-ratio от высоты.

Вариант 2 (получше)
Картинка, по крайней мере в примере, вообще не контентная и её можно убрать в стили (псевдоэлемент и его фон)

Comments

[Вячеслав Яшников]

в псевдоэлемент убрать ее не получится поскольку нужна поддержка webp (в примере я удалил source для ретины/для обычных экранов в формате png и source для ретины/обычных экранов в формате webp.

По поводу неизвестно как отрисовывать, я бы согласился с вами если бы я не задавал явно картинке тег img ширину и высоту и это не воспроизводилось бы снова.

я пробовал и через aspect-ratio задавать - проблема аналогичная как вы и написали он это не переваривает

я пробовал и высоту picture тегу задавать фиксированную - проблема также воспроизводится

проблема уходит только когда тегу picture задаешь display: inline, но это не совсем удобно для размещения

Я могу исправить это задав позиционирование картинки внутри picture по правому краю, это отчасти решит проблему и будет работать, но может есть другое решение

[Вячеслав Яшников]

а нет... задавая высоту picture фиксированную а не в процентах баг исправляется, однако это не подходит поскольку высота картинки должна зависеть от высоты контента слева

[Ankhena]

Вячеслав Яшников,

в псевдоэлемент убрать ее не получится поскольку нужна поддержка webp

Во-первых, есть image-set
Во-вторых, есть скрипт определяющий поддержку webp.
Так что это вообще не аргумент.

Ещё у вас картинка по виду векторная. Может она будет svg?

Ещё можно попробовать заменить абсолют на гриды. А абсолютить уже картинку, если по первому варианту.
И картинке тогда задавать aria-hidden.

[Вячеслав Яшников]

Ankhena, ждать определения скриптом поддержку webp это хорошая практика с точки зрения производительности? Браузеру нужно сперва понять какие картинки отдавать загрузив и выполнив скрипт и только потом приступать к отрисовке страницы, или я чего-то не понимаю

за image-set спасибо я посмотрю, однако там тоже псевдоэлементу не задать ширину и возможно он также будет его растягивать (надо пробовать)

Чтобы вставить svg - да это будет работать и в целом даже сэкономит 10кб на картинке это хорошее решение, однако не все картинки векторные, получается тут только юлить и пробовать, явного решения конкретно этого случая нет

[Ankhena]

Вячеслав Яшников, для пропорций, видимо, придется написать js и передавать через кастомное.

[smilingcheater]

Вячеслав Яшников, подскажите, вам действительно нужно что-то кроме webp? у него уже почти 100% поддержка браузерами, кроме старых Сафари и IE https://caniuse.com/?search=webp . Вам приходится поддерживать старые Сафари?

[Ankhena]

smilingcheater, avif?

[smilingcheater]

Ankhena, про него не подумал, потому что с ним практически не работал.
Подскажите, а вы с ним работали? Я пробовал, но не нашёл хорошего инструмента для конвертации в avif, пробовал в линуксе через утилиту convert - у меня на некоторых картинках полупрозрачный фон из серого стал синим.
Да и разница в размере файла не такая значительная с webp.

[Ankhena]

smilingcheater, https://squoosh.app/

[smilingcheater]

Ankhena, спасибо. Загрузил эту картинку - в этом конвертере артефакта с голубым фоном нет.

[Вячеслав Яшников]

smilingcheater, приходится поддерживать да(
Артефакт синий это я задал синий фон тегу picture чтобы наглядно показать его размеры, в самой картинке артефактов нет

[Ankhena]

Вячеслав Яшников, про голубой артефакт это вообще не про ваш код