When using an empty image as fallback the below html is produced. But this can not be hidden using the css trick mentioned in the README.txt because width and height properties are missing.

<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="http://dev.example.nl/files/styles/headerimage_bp_tablet_1x/public/header_image/27-04-2014-123.jpg?itok=0ZmYB7pp 1x" media="(min-width: 720px)">
<!--[if IE 9]></video><![endif]-->
<img alt="" src="http://dev.example.nl/data%3Aimage/gif%3Bbase64%2CR0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
</picture>

Comments

attiks’s picture

attiks commented
Status: Active » Fixed
sutharsan’s picture

sutharsan commented
Version: 7.x-2.x-dev » 7.x-2.3
Status: Fixed » Active

With the 2.3 release the output is now:

<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="http://dev.example.nl/files/styles/headerimage_bp_tablet_1x/public/header_image/27-04-2014-123.jpg?itok=0ZmYB7pp 1x" media="(min-width: 720px)">
<!--[if IE 9]></video><![endif]-->
<img alt="" src="http://dev.example.nl/files/styles/headerimage_bp_tablet_1x/public/header_image/27-04-2014-123.jpg?itok=0ZmYB7pp">
</picture>

No empty image gif. Perhaps it is in configuration, I can debug, but do not know where to start.

attiks’s picture

attiks commented

Can you try with js disabled to see what is outputted

sutharsan’s picture

sutharsan commented

Yes, that's more like it:

<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="http://dev.anna.nl/files/styles/headerimage_bp_tablet_1x/public/header_image/27-04-2014-123.jpg?itok=0ZmYB7pp 1x" media="(min-width: 720px)">
<!--[if IE 9]></video><![endif]-->
<img srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7 1w" alt="">
</picture>

What's next?

sutharsan’s picture

sutharsan commented

But even this output has no 'with' or 'height' attribute. Is there an other way to disable the image or is this still not fixed?

attiks’s picture

attiks commented

the img tag is needed by the polyfill, you could use css to hide it

sutharsan’s picture

sutharsan commented

I can manage to hide the gif with css using breakpoints. But using w=1/h=1 in css would be much easier.

attiks’s picture

attiks commented

The problem is that width and height are not reset by the polyfill, so we can not use them (for the moment), see also

  1. https://github.com/ResponsiveImagesCG/picture-element/issues/50
  2. https://github.com/ResponsiveImagesCG/picture-element/issues/85
attiks’s picture

attiks commented
Category: Bug report » Feature request
Status: Active » Postponed

Postponing till it get fixed upstream, so for the moment the README is not valid.

jelle_s’s picture

jelle_s
Primary language Dutch
Location Antwerp, Belgium
commented
Version: 7.x-2.3 » 7.x-2.x-dev

README updated.

attiks’s picture

attiks commented
Status: Postponed » Closed (fixed)

Assuming this is fixed, if not feel free to re-open or create a new issue.