When using a responsive picture element, the parent element does not receive the correct width in Firefox on OS-X.
Are there any solutions or workarounds for this issue?
.picture-wrapper {
float: left;
}
.next-element {
float: left;
}<div class="picture-wrapper">
<picture>
<source media="(min-width: 1000px)"
srcset="
//placehold.it/1200x600 1200w"
sizes="800px" />
<img class="image mix-image_buffer"
sizes="
(min-width: 400px) 100vw,
calc(100vw - 50px)"
srcset="
//placehold.it/200x200 200w,
//placehold.it/250x250 250w,
//placehold.it/300x300 300w,
//placehold.it/480x480 480w,
//placehold.it/600x600 600w,
//placehold.it/960x960 960w"
src="//placehold.it/200x200" />
</picture>
</div>
<div class="next-element">Caption</div>Codepen link: http://codepen.io/anon/pen/GZVeYw
Result:
Firefox
There is white space between the picture element and the next element
https://i.sstatic.net/eUBKt.png
Chrome / IE
In Chrome and IE, it works as expected without any whitespace present