picture opacity bug

by James Long

HTML

<p><code>&lt;img&gt;</code> with no opacity.</p>
<img src="https://www.theactuary.com/sites/default/files/images/121912_1.jpg">

<p><code>&lt;picture&gt;</code> with no opacity.</p>
<picture>
    <img src="https://www.theactuary.com/sites/default/files/images/121912_1.jpg">
</picture>

<p><code>&lt;picture&gt;</code> with opacity of 0.5.</p>
<picture class="opacity">
    <img src="https://www.theactuary.com/sites/default/files/images/121912_1.jpg">
</picture>

<p><code>&lt;picture&gt;</code> with opacity of 0.5 and <code>display:block</code> on the <code>&lt;img&gt;</code>.</p>
<picture class="opacity">
    <img src="https://www.theactuary.com/sites/default/files/images/121912_1.jpg" class="display">
</picture>

<p><code>&lt;picture&gt;</code> with opacity of 0.5 and <code>display:block</code> on the <code>&lt;img&gt;</code> and <code>&lt;picture&gt;</code>.</p>
<picture class="opacity display">
    <img src="https://www.theactuary.com/sites/default/files/images/121912_1.jpg" class="display">
</picture>

CSS

.opacity { opacity: 0.5; }
.display { display: block; }