Firefoxのピクチャエレメントの親の幅が大きすぎます

Question

Firefox（OS-X）では、反応するピクチャエレメントの親エレメントが正しい幅を取得しません。

このバグの回避策はありますか？

.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：http://codepen.io/anon/pen/GZVeYw

結果：

Firefoxの

画素と次の要素の間

ホワイトスペース

クローム/ IE

期待どおりに動作（NO空白）

Answer 1

bug実際に祖先だけでなく、<picture>ために起こります。

幅がわかっている場合は、CSSを使用して幅を設定することで回避できます。

<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" 
    style="width: 600px" />