How do I get srcset and fancybox working properly in Microsoft Edge?

HTML & CSS
1

Everything is working good in both Chrome and Firefox, yet I was dismayed to see that Microsoft Edge was showing small thumbnails instead of the proper size images. In fact one image is not even shown as a thumbnail. Not sure if it is the srcset code or Fancybox or even something else, causing the behavior. Any ideas as to what I need to do? Images on second half of this page: https://mrpitbull.com

 <img
data-sizes="auto"
   data-srcset="dog-pictures/blue-remyline1920.jpg 1920w, dog-pictures/blue-remyline1366.jpg 1366w, dog-pictures/blue-remyline940.jpg 940w, dog-pictures/blue-remyline640.jpg 640w" title="CLICK TO ENLARGE" data-fancybox data-caption="Imagine coming home and being greeted like this everyday!"
	img data-src="dog-pictures/blue-remyline940.jpg" alt="unbelievable remyline pitbull" width="940" height="529" class="lazyload" />
2

This code shows a picture as it should in all browsers, however the srcset function does not work, as near as I can tell. I pasted this code into the page using all of the same css and scripts. So, the problem would appear to be in the html code.

 <a href="dog-pictures/blue-remyline1920.jpg" title="CLICK TO ENLARGE" data-sizes="auto" data-srcset="dog-pictures/blue-remyline1920.jpg 1920w, dog-pictures/blue-remyline1366.jpg 1366w, dog-pictures/blue-remyline940.jpg 940w, dog-pictures/blue-remyline640.jpg 640w" data-fancybox data-caption="Imagine coming home and being greeted like this everyday!">
	<img data-src="dog-pictures/blue-remyline940.jpg" alt="unbelievable remyline pitbull" width="940" height="529" class="lazyload" /></a>
3

Looks ok to me in Edge and exactly the same as Chrome.

edge-chrome
edge-chrome2537Ă—914 677 KB

Do you have an up to date version of Edge?

4

Thank you very much for your effort to help me.

While I was waiting, I decided to roll back to my previous code, which is the one you are currently seeing. Until I can figure out how to code so that everything works, I am going to live with srcset not functioning. I am hoping somebody is familiar with what I am experiencing and has a solution.

5

I’d need to see the broken page for myself to debug properly.:slight_smile:

Srcset and fancybox seem to work ok together in this demo.

Have you looked in the console to see if there are any script errors in Edge that may stop the code from working.

6

Thank you for your willingness to help me. I loaded the offending code to the first picture on this page: https://mrpitbull.com/brindle.html

I don’t know anything about the “console” you are referring to. I will endeavor to learn about it. I will also take a good look at the demo you provided. Thanks.

I hope you can have better success than I have had.

7

Ok I’ll have a look when I get back to my computer later this afternoon.

8

Appreciated.

Now, I have loaded three different codes, you will note with the first 3 pictures. The first is the one that is only showing a thumbnail in Edge. However it is the only one of the 3 that the srcset function is actually working (as seen in Firefox or Chrome). I increased the width size of the page (larger contain area allows for larger image to auto load) so that after the page is refreshed, the larger image is loaded, where the other images on the page continue to load the smaller default image size, indicating that the srcset function is not working. I thought I was all set, until discovering the something was terribly amiss with Edge.

The second image on the page is using the code from the example you provided. Fancybox works, yet the srcset is unresponsive. I purposely left my new mouseover icon off, so as to differentiate between the other two I have been working with.

The third image is my first code and works the same as the demo code above it. It is hard to tell if the srcset is working because of the size of the images I am using, and the size of the containing area. I suspected that it wasn’t working and only confirmed, after increasing my page width, which allowed for the browser to choose the next biggest size.

9

I think the problem in edge is that the image has no width because you have set it to auto and because its lazy loaded it doesn’t trigger whatever observes the srcset image requirements.

As a quick test I added the following code:

img[data-src],img[data-srcset] {
  width:100%
}

Now when you load in Edge the images do use the appropriate width image but are scaled to 100% at the same time. Note that some browsers do not apply srcset image on resize but only on refresh so when you resize in edge you get the same image shrinking/growing unless you click refresh.

To be honest I find srcset more pain than its worth and you inflict on a contiual window grabber like me multiple images loads when one would have done.:slight_smile:

I would probably have used one large image, optimised it to a smaller file size than your small image anyway :).

If you find the that the width:100% works for you then you would probably need to also use media queries to limit the image width if you didn’t want it to be 100%. However, I would personally prefer the look of a 100% width image and not have gaps when the image reaches its maximum native size.

1 Like
10

It worked exactly as you indicated. So I am thrilled. Thank you.

Based on what you related, I wonder if I should leave it with the 100% in the css or if I should get rid on the auto size in the html, and define media queries? I saw code with that, yet I did not know the formula to determine what to choose for my particular sizes.

11

I prefer the 100% width but it shouldn’t be too hard to add a media query based on the viewport width and then set a max-width in px for the image.

Something like this but untested.

@media screen and (min-width:900px) {
    img[data-srcset]{max-width:640px}
}
@media screen and (min-width:1300px) {
    img[data-srcset]{max-width:940px}
}

As I said I prefer the image to expand to fill the available space unless of course things get too large.

12

This morning I removed the auto size out of the html and removed the width:100% from the css. And everything seems to be working. Later today I am going to watermark some images to see if the srcset function is working.

I will then experiment with the media query you provided. Thanks again.

1 Like
13

Good idea :slight_smile:

Remember to clear the cache each time as browsers may use the larger image if it is cached already. Also on resize some browsers will only load the next image in sequence if refreshed.

Lastly if you start wide and close the window smaller then once again some browsers will not load the smaller image when you get smaller because they have loaded the better quality image already. Browsers are allowed to make the best choice hence the differences.

14

Good advice. Will do.

15

You should update the original post with this information so people do not waste time using old information. Either keep the original post current in some way (perhaps with an update) or say something so people do not waste time.

16

All the major browsers have a debugging feature. Usually (always as far as I know) you can get to it using F12. Debugging has multiple tabs, one of which is Console. JavaScript can write to the console using console.log for degugging. The browser often writes error messages there.

17

Good thinking. Once I get it sorted out I will try to remember to so that.

18

I will take a look at that, thanks.

19

5-11-2019%201-42-16%20PM
5-11-2019%201-42-16%20PM445Ă—831 26 KB

I learned (and confirmed) a lot after watermarking the sizes on the images. The top picture resized perfectly going both up and down, selecting the proper srcset image. With Firefox (however I have it set up) I could resize the browser like an accordion and the top image cycled through the sizes without having to refresh. The bottom image, remained the same, indicating that the code used was faulty, although worked good with fancybox.

I learned too that the size of the containing element has nothing to do with the size srcset chose. The size chose was based on the entire browser window width (realize this is not a revelation to most). Now, I have to rethink the sizes of the images I have chosen to use.

Code that works:

<img
data-srcset="puppy-pictures/razors-edge-puppies-for-sale1920.jpg 1920w, puppy-pictures/razors-edge-puppies-for-sale1366.jpg 1366w, puppy-pictures/razors-edge-puppies-for-sale940.jpg 940w, puppy-pictures/razors-edge-puppies-for-sale640.jpg 640w" title="CLICK TO ENLARGE" data-fancybox data-caption="I am always excited when I find a Brindle puppy like this one in a litter."
	 data-src="puppy-pictures/razors-edge-puppies-for-sale940.jpg" alt="Beautiful Brindle Pit Puppy" width="940" height="529" class="lazyload" />
1 Like
20

For problems such as this the first thing to do is to check the documentation. I was not familiar with the data-* attributes but I found data-* - SVG: Scalable Vector Graphics | MDN. So then I knew that you were using something customized so then I undersood what you mean by Fancybox. So then I searched for “Fancybox microsoft” and found the following:

There are others so if those don’t help then search for more. There does seem to be problems with Fancybox in Edge but whatever the problem is, it has likely been encountered and solved by others.

If you still cannot solve the problem then you are nearly certainly guaranteed a solution if you can create a complete self-contained example that people can try out in their own system.

Also note that the error messages would go to the console as described previously.

1 Like