Hi there,

if we use the responsive_images module with blazy, we will get the fallback-image in IE11 and below, because they don't support the picture element. This is most often, a recommended smallest image, which looks bad on desktop.
The responsive_images module fixes this, by using a polyfill, called picturefill: http://scottjehl.github.io/picturefill/
This polyfill adds a src attribute with the correct image from the sources.

The problem is, that picturefill seems to expect only srcset to be present on the fallback image, but we changed that, when implementing the picture support.
See the discussion here: https://www.drupal.org/node/2752865

I still have to investigate more, since we need a src attribute to make blazy work...

What do you think?

CommentFileSizeAuthor
#6 blazy-ie-picture-2873319-6.patch8.27 KBgausarts
#3 blazy-ie-picture-2873319.patch4.61 KBgausarts
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

tjwelde created an issue. See original summary.

gausarts’s picture

gausarts CreditAttribution: gausarts commented

Thanks for the report.

I am afraid, I didn't use picture element as mentioned at:
https://www.drupal.org/node/2752865#comment-11318343

I was happy to include it when you offered it:
https://www.drupal.org/node/2752865#comment-11771528

However as it is in, I am happy to give it more love like you do ;)

I am thinking to pass picturefill library into BlazyManager::attach().

But first we need to know that we are dealing with picture from the given "Responsive image style" setting.

We may need to investigate Responsive image module source code if any function that can be used to identify picture element from "Responsive image style". Once identified, we can tell BlazyManager::attach() to attach its library.

Then it should be good, yes?
If not that easy, then we need to do more work on this ;)

gausarts’s picture

gausarts CreditAttribution: gausarts commented
Status: Active » Needs review
FileSize
blazy-ie-picture-2873319.patch4.61 KB

I know you are working on this. But I guess I found the old solution.

The solution was there at alpha2:
http://cgit.drupalcode.org/blazy/tree/js/blazy.load.js?id=97a3f1c8303f77...

It was removed later when SRCSET support was landed:
https://github.com/dinbror/blazy/issues/75

Tested against IE9, but I haven't got a chance for other IEs. Please verify.

It doesn't affect modern browsers as I noticed Picturefill outputs extra [data-pfsrc] for IE9 which is used to exclude modern browsers.

I am not sure if [data-pfsrc] is also output for IE10+.
If not, and not working for IE10+, please try removing the condition "&& ie":

+
+      // @todo: Remove when Blazy library fixes this.
+      // @see http://scottjehl.github.io/picturefill/
+      if (window.picturefill && ie) {
+        window.picturefill({
+          reevaluate: true,
+          elements: [el]
+        });
+      }
     }
gausarts’s picture

gausarts CreditAttribution: gausarts commented

May need clearing both Drupal and IE cache. Or regenerate JS if trouble.

tjwelde’s picture

tjwelde CreditAttribution: tjwelde at Thunder commented

good find ;)

Works also perfectly in IE11.

Thanks.

Can you publish a new release after merging this?

Best Regards
Timo

gausarts’s picture

gausarts CreditAttribution: gausarts commented
FileSize
blazy-ie-picture-2873319-6.patch8.27 KB

Thank you.

I'm in the middle of something, yet will do tomorrow, or sooner, hopefully. ;)

ATM, safe to remove the @todo, and move the hasClass into dBlazy to be re-usable.

Attached for doc only, then.

gausarts’s picture

gausarts CreditAttribution: gausarts commented

Sorry, I couldn't make it "tomorrow" :(

I am still in the middle of something before I can release another RC. Hopefully it doesn't take days, though.

tjwelde’s picture

tjwelde CreditAttribution: tjwelde at Thunder commented

ok, thanks for the update

daniel.bosen’s picture

daniel.bosen
he/him
CreditAttribution: daniel.bosen at Thunder commented

Has "tomorrow" happen yet? :-)

  • gausarts committed d13f70d on 8.x-1.x 
    - #2873319 by gausarts, tjwelde: IE11 and below: responsive_image IE fix...
gausarts’s picture

gausarts CreditAttribution: gausarts commented
Assigned: tjwelde » Unassigned
Status: Needs review » Fixed

Sorry for delay ;)

I was adding a few basic tests and needed to sync them first with Slick, GridStack, etc. tests as well.
We'll have an RC2 shortly.

Thanks for the spirit ;)

Status: Fixed » Closed (fixed)

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