Not a huge issue, but if you set your fluid layout to use 'empty image', view it, then scale your browser back up, the fixed dimensions do not get removed from the img tag. This will only happen to a few users I expect (web designers, tablet owners that like to rotate) but would be good to resolve.

Anyone else had this issue?

My current temporary solution is to fix with css (below formatted as LESS):

body.responsive-layout-narrow, body.responsive-layout-normal, body.responsive-layout-wide {
  img[width="1"][height="1"] {
    width:auto !important;
    height:auto !important;
  }
}

This appears to do the trick for me nicely, although would be good if the js automatically removed these items for me. It would probably work if ALL the spans had a width/height of null so as to remove the setting of "1".

Dan

Comments

attiks’s picture

attiks commented

Can you paste the html output of the picture?

retrodans’s picture

retrodans commented

This is it before I scale the browser to fluid:

<img src="http://localpoc2013.sportrelief.com/sites/default/files/styles/subpod_withoutside_breakpoints_theme_cr_layout_wide_1x/public/batman-logo_0.jpg?itok=MN6c4M1E">

And this is after a resize the browser to fluid (empty image) and back again:

<img src="http://localpoc2013.sportrelief.com/sites/default/files/styles/subpod_withoutside_breakpoints_theme_cr_layout_wide_1x/public/batman-logo_0.jpg?itok=MN6c4M1E" width="1" height="1">

Is this what you were after?

attiks’s picture

attiks commented

do you have a data-width/data-height inside the spans? Can you paste all spans as well?

retrodans’s picture

retrodans commented

Sorry. here are the full groups:

Before resizing:

<span data-picture="" data-picture-group="subpod_withoutside" data-picture-align="">
<span data-src="http://localtest.test.com/sites/default/files/styles/main1pod_withoutside_breakpoints_theme_cr_layout_fluid_1x/public/batman-logo_0.jpg?itok=FUpdfmA4"></span>
<span data-media="(min-width: 0px)" data-src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-width="1" data-height="1"></span>
<span data-media="(min-width: 0px) and (min-device-pixel-ratio: 2), (min-width: 0px) and (-o-min-device-pixel-ratio: 2), (min-width: 0px) and (-webkit-min-device-pixel-ratio: 2), (min-width: 0px) and (min-resolution: 2dppx)" data-src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-width="1" data-height="1"></span>
<span data-media="(min-width: 740px)" data-src="http://localtest.test.com/sites/default/files/styles/subpod_withoutside_breakpoints_theme_cr_layout_narrow_1x/public/batman-logo_0.jpg?itok=StueeIvX"></span>
<span data-media="(min-width: 740px) and (min-device-pixel-ratio: 2), (min-width: 740px) and (-o-min-device-pixel-ratio: 2), (min-width: 740px) and (-webkit-min-device-pixel-ratio: 2), (min-width: 740px) and (min-resolution: 2dppx)" data-src="http://localtest.test.com/sites/default/files/styles/subpod_withoutside_breakpoints_theme_cr_layout_narrow_2x/public/batman-logo_0.jpg?itok=BqU8v72s"></span>
<span data-media="(min-width: 980px)" data-src="http://localtest.test.com/sites/default/files/styles/subpod_withoutside_breakpoints_theme_cr_layout_normal_1x/public/batman-logo_0.jpg?itok=nIPkpnqk"></span>
<span data-media="(min-width: 1220px)" data-src="http://localtest.test.com/sites/default/files/styles/subpod_withoutside_breakpoints_theme_cr_layout_wide_1x/public/batman-logo_0.jpg?itok=MN6c4M1E"></span>
<noscript>&lt;img typeof="foaf:Image" src="http://localtest.test.com/sites/default/files/styles/main1pod_withoutside_breakpoints_theme_cr_layout_fluid_1x/public/batman-logo_0.jpg?itok=FUpdfmA4" alt="" /&gt;</noscript>
<img src="http://localtest.test.com/sites/default/files/styles/subpod_withoutside_breakpoints_theme_cr_layout_wide_1x/public/batman-logo_0.jpg?itok=MN6c4M1E"></span>

After resizing:

<span data-picture="" data-picture-group="subpod_withoutside" data-picture-align="">
<span data-src="http://localtest.test.com/sites/default/files/styles/main1pod_withoutside_breakpoints_theme_cr_layout_fluid_1x/public/batman-logo_0.jpg?itok=FUpdfmA4"></span>
<span data-media="(min-width: 0px)" data-src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-width="1" data-height="1"></span>
<span data-media="(min-width: 0px) and (min-device-pixel-ratio: 2), (min-width: 0px) and (-o-min-device-pixel-ratio: 2), (min-width: 0px) and (-webkit-min-device-pixel-ratio: 2), (min-width: 0px) and (min-resolution: 2dppx)" data-src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-width="1" data-height="1"></span>
<span data-media="(min-width: 740px)" data-src="http://localtest.test.com/sites/default/files/styles/subpod_withoutside_breakpoints_theme_cr_layout_narrow_1x/public/batman-logo_0.jpg?itok=StueeIvX"></span>
<span data-media="(min-width: 740px) and (min-device-pixel-ratio: 2), (min-width: 740px) and (-o-min-device-pixel-ratio: 2), (min-width: 740px) and (-webkit-min-device-pixel-ratio: 2), (min-width: 740px) and (min-resolution: 2dppx)" data-src="http://localtest.test.com/sites/default/files/styles/subpod_withoutside_breakpoints_theme_cr_layout_narrow_2x/public/batman-logo_0.jpg?itok=BqU8v72s"></span>
<span data-media="(min-width: 980px)" data-src="http://localtest.test.com/sites/default/files/styles/subpod_withoutside_breakpoints_theme_cr_layout_normal_1x/public/batman-logo_0.jpg?itok=nIPkpnqk"></span>
<span data-media="(min-width: 1220px)" data-src="http://localtest.test.com/sites/default/files/styles/subpod_withoutside_breakpoints_theme_cr_layout_wide_1x/public/batman-logo_0.jpg?itok=MN6c4M1E"></span>
<noscript>&lt;img typeof="foaf:Image" src="http://localtest.test.com/sites/default/files/styles/main1pod_withoutside_breakpoints_theme_cr_layout_fluid_1x/public/batman-logo_0.jpg?itok=FUpdfmA4" alt="" /&gt;</noscript>
<img src="http://localtest.test.com/sites/default/files/styles/subpod_withoutside_breakpoints_theme_cr_layout_wide_1x/public/batman-logo_0.jpg?itok=MN6c4M1E" width="1" height="1"></span>
attiks’s picture

attiks commented
Status: Active » Fixed

I pushed a fix for picturefill.js, can you try it. Use the code from git, or wait 12 hours for the package to be updated.

retrodans’s picture

retrodans commented

Just tested on local test environment, and appears to work perfectly. Thanks for the tidy fix.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

  • Commit e964502 on 7.x-1.x, picturefill2 by attiks: 
    Issue #1993676 by retrodans: Fixed When using 'empty image' option,...

  • Commit e964502 on 7.x-1.x, picturefill2, 7.x-2.x by attiks: 
    Issue #1993676 by retrodans: Fixed When using 'empty image' option,...