AdBock's Content Blocking feature on Safari interfering with BLazy

[pentool]

Hi,

It seems that AdBlock's "Content Blocking" feature is interfering with BLazy. Since the "Content Blocking" feature of AdBlock seems to be only available in Safari, this issue concerns only the Mac. I've tested this on other browsers and on other platforms as well, but only Safari on the Mac running the AdBlock plugin (with Content Blocking disabled) seems to be effecting the functionality.

DETAILS:

I have two web pages, pageA.html and pageB.html. Both pages have a couple of images (above and below the fold), and both pages link to one another.

(Note: I assume this has to do with AdBlock, but in order to reproduce this issue, you need to upload files to a server. Running it locally doesn't have an effect.)

So I go to pageA on the server. The images above the fold load fine, they are fading in. Great. Now I click the link on the page that takes me to pageB. Same story. Images above the fold on pageB load find, they are fading in. Great.

Now, on pageB click the link that takes you back to pageA. Arriving to pageA, the images above the fold are not visible and they are not loading. When I scroll down to reveal images below the fold, they are loading OK, and they are fading in. But now I scroll up (still on pageA), and the images at the top (above the fold) are still blank.

Now on pageA, I click the link that takes me back to pageB. Again, images above the fold on pageB are now not loading. I can go back and forth between pageA and pageB, and the images above the fold will not load. Viewing the source reveals that indeed the "src" attribute of the images (that are above the fold) are not loaded.

I can refresh the page (either A or B) and the images will be loaded again. But now if I repeat the exercise (going back and forth between A and B), above the fold images will not load again.

CONCLUSION:

Finally I have narrowed it down, that this is only an issue in Safari on the Mac, running AdBlock. In AdBlock's settings, one of the option is "Enable Safari Content Blocking". If this checkbox is NOT checked (for some reason you'd think it's the other way around), then this issue happens what I jsut described above.

However, when you DO check the "Enable Safari Content Blocking" checkbox, BLazy will work again correctly and going back and forth between pageA and pageB will load all images that are above the fold.

I have tested this under the following scenarios:

Mac OS X El Crapitan 10.11.3

• Safari 9.0.3: If AdBlock is installed and "Enable Content Blocking" is checked, above the fold images will not load the second time you visit the same page.
• Firefox 44.0.2 and Firefox Developer Edition 46.0a2: AdBlock is not available for Firefox, but with and without AdBlock Plus, works fine.

Windows 7
Works fine on all browsers (Firefox, Chrome, IE, Opera)

Windows 10
Works fine under Edge, Chrome, Firefox

Unfortunately, by default, the plugin's "Enable Safari Content Blocking" is disabled, which causes the issue.

Link to AdBlock for Safari: https://getadblock.com

OS X 10.11.3 El Crapitan
Safari 9.0.3
BLazy 1.5.3
AdBlock 2.49

[dinbror]

Thanks @pentool for a very detailed description.
Do you have a live example or some code I can see?

[pentool]

I have uploaded a sample at this location

STEPS:

1. Install AdBlock for Safari. (link to extension: https://safari-extensions.apple.com/details/?id=com.betafish.adblockforsafari-UAMUU4S2D9)
2. Go to Preferences > Extensions. Select 'AdBlock' and click 'AdBlock Options'
3. Make sure in the page that will come up in the browser, under 'General Options', the 'Enable Safari Content Blocking' is UNCHECKED. (Should be by default.)
4. Restart browser. Clear cache, etc.
5. Navigate to pageA. Scroll down. Noice all images load fine.
6. Navigate to pageB using the link in the top navbar. Scroll down. Notice all images load fine.
7. Navigate back to pageA using the link in the navbar. Notice images above the fold don't load. You can scroll down and images below will load.
8. Navigate back to pageB using the link in the navbar. Images at the top will load, but images at the bottom will not.
9. Open Preferences > Extensions > AdBlock Options and check 'Enable Safari Content Blocking'. You will have to restart the browser. You can clear caches if you want.
10. Repeat steps 5 - 8 and notice that as you go back and forth between the pages, all images will load.

Side note: Since my original post, I've tried another lazy plugin, Lazy Load XT (http://ressio.github.io/lazy-load-xt/). Using that script, all images seem to load fine regardless of the AdBlock settings so I'm not sure why images are being affected when using BLazy.

[dinbror]

Thanks @pentool

I can reproduce it and will look into it. In the meantime could you try one thing.
Right now your images are only 1x1 px when not lazy loaded. Could you try to add width:100% to your .img-responsive rule so it will reserve the real image dimensions.

[pentool]

Thanks for checking in this! I've added "width:100%" to ".img-responsive", but the only thing that seems to change is that the placeholder images are now 100% sized. They are still coming in blank, though.
PS: I'm sure you noticed that I'm using Bootstrap which defines ".img-responsive".

[dinbror]

Fixed in v. 1.5.4.

Thanks for your help @pentool. Really appreciate it

[pentool]

You closed down that thread so fast I didn't even have a chance to say thank you! [&#X1f60a]

---

From: dinbror notifications@github.com
Sent: Sunday, March 6, 2016 3:08 AM
To: dinbror/blazy
Cc: pentool
Subject: Re: [blazy] AdBock's Content Blocking feature on Safari interfering with BLazy (#78)

Closed #78#78.

Reply to this email directly or view it on GitHubhttps://github.com//issues/78#event-579207415.