Srcset and Sizes setting image height to 30px

Fixed, not yet flighted Issue #7778808

Details

Author
Terry U.
Created
Jun 3, 2016
Privacy
This issue is public.
Found in
  • Microsoft Edge
Reports
Reported by 21 people

Sign in to watch or report this issue.

Steps to reproduce

  1. Open Fiddler
  2. Set performance -> Simulate Modem Speeds
  3. Go to https://srcset-repro.azurewebsites.net/

If image is sized correctly do the following:

  1. Close tab
  2. Open a new tab
  3. Go to https://srcset-repro.azurewebsites.net/
  4. Repeat 4-6 until it shows up at 30px

Please see other feedbacks in userfeedback VSO for feedbacks that are tracked by this work item.

Attachments

Comments and activity

  • I can replicate this every time by hitting enter on the URL.
    If I do a refresh/reload then it doesn’t always happen.

  • Microsoft Edge Team

    Changed Assigned To to “Ibrahim O.”

  • Thank you for the feedback. We have been unsuccessful reproducing this issue on MS Edge. Could you please let us know does it repro on both IE and Edge? Please also let us know what versions of IE and Edge you are testing and feel free to provide more details about the issue such as the environment, your test results on other browsers or testing MS Edge on different environment. I would also suggest you to check your flags under ( URL : ‘about:flags’ ) and clear your browsing data for testing purpose. Since the issue seems like environment specific I would also suggest you to go Internet Options and click the Accessibility button under General tab, see if there Style sheet used for formatting documents. 

    Best regards,
    The MS Edge Team

  • Microsoft Edge 25.10586.0.0
    Microsoft EdgeHTML 13.10586

  • Hello Terry,

    Thank you for the update. The issue is still not reproducible in our end. Please see the attachment. I would also recommend you to test this issue on different environments or virtual machine to see if it is reproducible or not. Please keep us posted about your progress resolving this issue, we will be happy to assist you.

    All the best,
    The MS Edge Team

  • Hey,

    Any updates regarding this issue? I was able to reproduce this issue on http://www.grommets.co.uk/news/ (not on the first page but when navigating with the pagination). Images seem to break randomly but when they do
    height: auto; always translates to height: 30px; for some reason. It seems to be related to srcset and rendering the images.

    I was trying to trigger re-rendering for broken images from developer tools changing image height from auto to 1px and back to auto but it didn’t resolve the issue. Checking the image element dimensions from the ‘layout’ tab in developer tools seems to trigger re-rendering and fixes the image dimensions but still it shows element height as 30px until you switch to another tab and back.

    Testing was done with BrowserStack (Windows 10, Microsoft Edge 25.10586.0.0, Microsoft EdgeHTML 13.10586)

  • To be able to work on the issue we need this to be reproducible in our end or in general. I have tested this on 10586.420 which is the latest public build, also multiple older versions of Edge and still couldn’t able to reproduce the issue.  (Please see the attachment “screenCapture.gif”) It would help our investigation If you could create a local repro sample and attach to this connect. Please also check you build version (winver.exe), and update if necessary.

    All the best,
    The MS Edge Team

  • Hi Ibrahim,

    Tried to attach my .gif as an attachment here but it always resulted to an unexpected error so I had to upload it to imgur, but here it is http://i.imgur.com/bL4WseH.gif

    This issue seems to be happening only on initial loads when the images are not cached by the browser and it seems to resolve itself always just by rerefreshing the page. I guess it could be replicated by throttling your connection speed as it seems to happen only for non-cached images?

  • Could you please test this issue on Insider Preview VM (https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/windows/)
    Please choose the following VM from the dropdown (Microsoft Edge on Win10 Preview 14.1436X) and let me know your results.

    All the best,
    The MS Edge Team

  • Hi,

    I was able to reproduce this issue with the Insider Preview VM.
    Windows 10, Microsoft Edge 38.14366.0.0, Microsoft EdgeHTML 14.14366.

    See the screenshot MSEdge - Win10_14361.png

  • Can’t upload anything here, so once again http://i.imgur.com/DUhT5mo.png

  • Still not able to repro and I may missing something in here. Could you please let me know which method you use to turn off caching. 

  • We seem to be experiencing a similar issue here, reported by a client for whom we’re developing a new website.

    Screenshots are on Imgur at - http://imgur.com/a/k7T7M

  • I can also reproduce this issue in the current version of Edge.

    When adding an image with:

    • source-set
    • width attribute
    • height attribute
    • width: 100%; in css
    • height: auto; in css

    The height is then computed to 30px. This is easily reproduceable on every Win10 Computer with Edge in our company.

  • I’m also seeing this issue in MS Edge v. 25.10586.0.0 on Windows 10

    Visible here (screen shot of this page attached above):
    http://www.nolankitchens.com/kitchens/appliances-accessories/

  • Microsoft Edge Team

    Changed Assigned To to “Rick J.”

    Changed Assigned To to “Bogdan B.”

  • Same issue when using wp_get_attachment_image (WordPress) that generates the following responsive image markup:

    The bug happens irregularly - sometimes it displays correctly other times it does not.

    When I inspect the img tag using MS Edge F12 dev tool and click the sizes attribute without actually making any changes, the image pops into its correct dimensions, so it doensn’t seem to be a CSS bug.

    Could it be that MS Edge fails to parse the image dimensions on load, causing it to default to 30px height?

  • I’m also seeing this, and have produced a minimal sample here:

    https://7778808.azurewebsites.net/

    As others note, it doesn’t always happen.
    If it loads correctly, don’t use the refresh button , as this seems to make it work. Put your cursor in the address bar and hit enter to load the page again, for me about 8/10 loads it is broken, but if I use refresh it always loads correctly.

    Edge 25.10586.0.0

  • Microsoft Edge Team

    Changed Status to “Confirmed”

  • Confirming both details pointed out by Terje K. and Will J.

    I wonder if there is any workaround for this problem other than waiting for a bugfixed Edge version ?

    Edge 25.10586.0.0

  • I have the same problem. Microsoft Edge 38.14393.0.0
    Images are shown as height:50px when the css is set to height:auto.
    When reloading the page the images are shown correctly.

  • Witnessing this on a client’s site. Also looked at p.w’s site (above) and can replicate it there. Does anyone know if removing srcset and sizes fixes the issue?

  • We are having this issue with our clients as well. Why has this issue gone on for so many months without addressing? I see “Ibrahim O.” posted a few stubborn/lazy “we can’t reproduce” comments, but this is a serious issue that needs some real attention.

    Microsoft needs to either up their game or get out of the browser business all together. They have never been able to compete with Chrome of Firefox on quality, consistency, or performance. All they do is make the lives of web developers miserable for the sake of pushing their brand on those who get stuck with their “default” product.

  • I have experienced exactly the same issue on a WordPress site - I have had to strip out the srcset attributes on images so that they work in Edge. This is a massive step backwards in terms of responsive and reactive web. Such a massive shame Microsoft continues to halt progress and continues to cause grief for developers.

  • Thank you all for your feedback and the updates. We would like to inform you that we got repro on this issue which already escalated for further processing and currently we are investigating the issue. We are hoping to have that fix in one of our future updates soon.

    All the best,
    The MS Edge Team

  • Any update on this? Same problem with featured images in the popular twenty-sixteen wordpress theme. Open our blog in edge and the first time the top image is squashed to 30px.

  • We are currently working on this issue and the fix will be shipped as soon as available, primarily on insider preview.

    All the best,
    The MS Edge Team

  • A platform fix is no good here. We, the web developer cannot control which platform our client is using. Some may even still use IE6. What we need is a script fix. Anything we can set in either javascript or css, or html to prevent this from happening.

  • Microsoft Edge Team

    Changed Assigned To from “Bogdan B.” to “Greg W.”

  • “The fix will be shipped as soon as available” at Oct 12, 2016. Is this impossible to fix or why is it taking so long?

  • “The fix will be shipped as soon as available” at Oct 12, 2016. Still waiting for the fix???

  • Same issue here. Any news?

    I subscribe Chris E.’s words:

    “Microsoft needs to either up their game or get out of the browser business all together. They have never been able to compete with Chrome of Firefox on quality, consistency, or performance. All they do is make the lives of web developers miserable for the sake of pushing their brand on those who get stuck with their “default” product.”

    Instead of going out, Microsoft placed in our lives another crappy browser. Shame on you.

  • If I put a no-break space (  or  ) between die srcset values it works for me.

    Example:
    old -> srcset="big.jpg 1x, big-hd.jpg 2x" (didn’t work)
    new -> srcset="big.jpg 1x,big-hd.jpg 2x" (no space between the values)

  • I mean  

  • new -> srcset="big.jpg 1x,big-hd.jpg 2x" (no space between the values)

  • My client also noticing this problem. Hello Microsoft? Oct 12, 2016 was almost 3 months ago, did you solved this issue or not?

  • I have several customers who are facing this issue. When is this getting fixed?

  • Microsoft Edge Team

    Changed Assigned To from “Greg W.” to “Patrick R.”

    Changed Assigned To from “Patrick R.” to “Greg W.”

  • Hey everyone, sorry about the delay on this one - thank you for your patience. I have tried reproing this on internal builds to no avail, I was able to repro it earlier in the release but it is no longer reproing. So it must have been addressed by other work in the engine. I have tried reproing ALL of the URLs outlined here on phone (so I’d get slowing network) and desktop builds, with multiple tries and clearing the cache to no avail; as well as throttling the network on desktop.

    Additionally, I reached out to people outside of the org to see if they can repro it on insider builds of Edge 15 and they couldn’t either. If someone here is able to let me know if their site’s still show the same issue on Windows Insider builds of Edge 15 I’d greatly appreciate it. I believe the issue has been fixed but want to ensure that this is the case for everyone before closing the bug out. Thank you.

  • Hi Greg,

    Thanks for getting back on this.

    I have just checked and I am still seeing this issue. Browser versions as follows:

    Microsoft Edge 38.14393.0.0
    Microsoft EdgeHTML 14.14393

    I am seeing it on this page:
    http://www.nolankitchens.com/kitchens/appliances-accessories/

    I have noticed however, that if the image has already been cached, the height is set correctly - so it is only a problem on ‘fresh’ images.

    I am on office broadband.

    Many thanks,
    Caitriona

  • Hey Caitriona D. Thanks for taking a look, but I need you test on Edge 15 or later, your currently running 14 and there I was able to repro it as well. If you have a machine that you have Windows Insider on it, make sure you have it updated and you should get the update for Edge 15. Thanks!

  • Hi guys,

    Same problem in Edge 14.14393, with WordPress’s responsive srcset. I can confirm Claudio S.’s technique of removing spaces between srcset values also fixes this for me. Seems silly to rebuild a part of WordPress because of this Edge bug though.

    Cheers,
    Dee

  • I can confirm it’s gone with Edge 15 or later. Have you got any release date for us? I want to make sure we can re-enable this feature after Edge 15 has been released.

    Thank you

  • Edge 15 will be shipping with the Creator’s Update, the exact date hasn’t been determined yet so I’d just keep an eye on the blogs and when the official date is released it will be provided there. I will keep this bug alive and on our backlog until Edge 15 ships publicly to allow for spacefight (and others below) to test on their sites, upon feedback we’ll determine what to do with this bug at that time. Thank you!

  • Well, I just installed the Creator’s Update today, and we are still seeing this issue with Edge & srcset. Very disappointed that this wasn’t addressed as described above.

  • Same here - after Creator’s Update still seeing that issue with srcset and sizes - some images at first are displaying at 30px height.

  • I can confirm the same. The bug is still there after Creators Update. I’ve also tried empty the cache.

  • Greg W, is Microsoft investigating this? If so, when can we expect a fix? I am likely going to have to disable srcset on our site because of Edge, which makes no sense.

    I can elaborate on the issue we are seeing. Images with srcset attributes randomly show up at 30px height, and sometimes don’t show at all with a height of zero. It does not happen all the time. On some pageloads, there are no issues, yet on others, a portion of the images will exhibit this behavior. For example, we have 30 images per page and 2-3 will show up at 30px high, and 5-10 more may show up as blank. Those 30 images all have identical CSS and the same srcset “family” of sizes (with different image urls, of course)

    Our img elements do not specify a height or width. The CSS on those images either specify a fixed width and height:auto or max-width:100%/height:auto. They are designed to be responsive, and we have varying aspect ratios.

    Oddly, this problem seems worse on certain screens. The hidpi screen on my Surface Book rarely shows it. But when I move the browser window to my attached Dell U2410, which is lower dpi, I see it all the time. I’ve seen it often on some of my other lower dpi screens as well. I don’t know what the correlation is, but like I said, the Surface Book rarely shows the error.

    I have replicated the issue on 5 different computers and 8 different screens, so it is not my setup here. The site works fine in other browsers, including IE.

    The “replace the whitespace” hack mentioned above did not work for me. Besides, that is a hack that is both impractical and not adherent to the srcset spec.

    I really hope there is someone there paying attention to this. The bug is 10 months old at this point.

  • @klisota @tobias @awx can you please provide me with the URLs you’re seeing this on? Additionally, the hardware and Edge build number. As stated below I am not able to repro this on any of the sites that have been provided. I am more than happy to get this looked into but as you can imagine I need a repro to do so. If you’re able to reduce the issue into a JSbin or similar all the better, but at minimum I need the URLs to do so. Thank you.

  • Microsoft Edge Team

    Changed Assigned To from “Greg W.” to “Jonathan H.”

  • Im getting the bug on every computer with Edge i have tested it on.

    You can check https://www.avitel.se/produkt-kategori/headset/
    If you step forward in the pagination of the products you eventually should see the bug.

    Im on Windows 10 Pro Creators Update and Microsoft Edge 40.15063.0.0, Microsoft EdgeHTML 15.15063.

    My workstation computer is a Intel Core i7-4770, 3.4 GHz. 32 Gb RAM. AMD Radeon HD 6800 series (driver version 15.201.1151.1008)

    My other laptop computer is a Intel Core i5-3317U, 1.7 GHz. 4 Gb RAM. Intel HD Graphics 4000 (driver version 10.18.10.4358)

  • Microsoft Edge Team

    Changed Steps to Reproduce

  • Special thanks to Kevin L. & Tobias J. as I was able to repro the issue internally. I set up an azure site with a grab of the content from Kevin just in case it changes here: https://srcset-repro.azurewebsites.net/ I then also verified that it repro’s on this repro site. I’ve also updated the repro steps with what I did.

    My hunch as to what is happening is the image on the initial layout pass is sized to our “broken image” image which happens to be 28 x 30, and when the actual image is fetched the layout it not invalidated thus gets painted at N x 30.

  • Microsoft Edge Team

    Changed Steps to Reproduce

  • The issue has still not been fixed. I still have the issue with Microsoft Edge 40.15063.0.0 - Microsoft EdgeHTML 15.15063. It seems that it’s much more likely to happen if the website loads faster. It also happens randomly to images. Since I’ve used caching to speed up my website to load under 400ms about 50% of images on my website are smashed to 30px vertically making my Wordpress website almost unusable. This is a big issue.

    Also it happens much less often when the website is in https (which your test link is in). I would try testing on websites without https.

    http://imgur.com/a/ji4tv

  • Microsoft Edge Team

    Changed Status from “Confirmed”

    Changed Assigned To to “Christian F.”

  • this jquery is a work around for this bug, not the most elegent solution. But it works for now
    $(document).ready(function(){
    if(window.navigator.userAgent.indexOf(“Edge”) > -1){
    $('img[srcset]').each(function() {
    $(this).attr('src’, $(this).attr(‘src’)+’?’+Math.random());
    });
    }
    });

  • I just created a Website based on WordPress. Everything was great until I tested with Edge. I am struggling with exactly this problem. It’s good to see that the bug has been reported, but kind of sad that it now has passed its 1 year birthday. At the moment my only “solution” is to warn users that if they see distorted images, they should try another browser.

  • Not able to upgrade to the latest Edge in order to see this fix.

    My PC appears to be stuck on Edge v38 despite windows update telling me it is "up to date". I do not have ‘defer upgrades’ ticked and I have ticked 'give me updates for other Microsoft products when I update Windows’.

    Do I need to be on the insider program to see this update? If so, when will it be released to people not on the insider program?

  • Looks like my PC has updated to Edge 40 over the weekend. I can’t repro the issue anymore with the new version. Thanks!

  • I have Edge 40.15063.0.0. Bug is still there.

  • Can confirm Microsoft Edge 40.15063.0.0 bug still there

  • When I originally repro’ed this issue, I had to do the following:

    1. Open 2 tabs, one set to about:blank, the other on the page with the bugged image
    2. On the blank tab, pin the settings to the side so I can easily flush cache
    3. Flush the cache on the blank tab
    4. Reload the 2nd tab on the bugged page
    5. Repeat steps 3 and 4 about 5-8 times
    6. Repro

    @Tobias, @erwin Does flushing the cache help the issue go away in Edge 40?

  • Tried that now. Doesn’t help. The problem comes and goes.

  • Microsoft Edge Team

    Changed Assigned To from “Christian F.” to “Rafael C.”

  • Could everyone go to wired.com and see if some of the images are too small? I’m seeing this issue and apparently its a duplicate https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/12902128/

  • Microsoft Edge Team

    Changed Status to “Fixed”

  • In which version has it been fixed? The bug still shows up in EdgeHTML 15.15063.
    Btw, by my experience it seems that images inside picture elements aren’t affected by the bug: it could be a good workaround for developers.

  • Hello,

    Thank you for providing this information about the issue. We are pleased to report this feature is fixed in Edge and will be available in an upcoming Insider Preview build.

    Best Wishes,
    The MS Edge Team

  • James M, what a complacent comment. Nice that you think it’s fixed, but I have recently launched a site on Wordpress and one of the directors of the company keeps reporting that we have the 30px problem on images on the Directors’ page. I managed to replicate it once Edge browser (Windows 10). But since, I have not managed to replicate it. As recently as this evening he has repeated his complaint, and frankly I am being made to look stupid by YOUR browser. I ought to tell him that he should not be using Edge but that will sound unprofessional. But as it is you are making me look unprofessional. This string has gone on for more than a year. It’s a disgrace. If you really think it has been fixed, then please tell us WHAT the problem was, so we have some insight into how to deal with it - because I bet it isn’t fixed.

  • Following up my previous comment, I note that Wordpress features in quite a few of the earlier comments. The problem I am having is with the rendering of Wordpress featured images. Looking at some of the earlier screenshots, they look as though they may also be featured images. Is this where the problem lies? If it is, THEN PLEASE TELL US. Because armed with that knowledge we can think of other ways of setting up the image. Not, of course, that this should be necessary. And James M, while you tell us the issue is fixed, will it be fixed for all users of Edge, ie will you be able to implement the fix on all existing instances of Edge?

  • Robert, its not just featured images. I think the problem was, as mentioned earlier in the thread that its the placeholder that has a height of px sometimes isnt updated to the correct size after the image has fully loaded. And i think it something to do with image that have the srcset tag.

  • Thanks Tobias. The featured image creates a srcset tag. So in a way the featured image does get caught in the problem by having the srcset generated. Armed with this notion, I have now experimented with setting up a custom field for the image and then having a src rather than a srcset. Not a pretty workaround, and don’t yet know whether it’s cured the issue for the director I mentioned and his Edge browser - but fingers crossed. Having said all that, I’m self-taught and one of the useful spinoffs from this conversation is that I went off and read up about srcset last night!

  • Any images you insert via WordPress functions will have the srcset attribute added. You can remove this is you like via another function. This was what I had to do initially and it seemed ridiculous. In fact I just ended up not doing it in the end for the sake of audience levels on the site. FYI

    add_filter('wp_calculate_image_srcset’, ‘__return_false’);

    Is the function you add to your functions.php

  • That’s useful Simon, thanks.

  • James M. or anyone from Microsoft reading this: can you go to wired.com and verified that A) that the issue on some wired.com issues is indeed this issue and B) is it fixed? If some of the images are still too small, it’s either not fixed or the smaller-images-on-wired.com-issue is a different problem

  • Microsoft Edge Team

    Changed Status from “Fixed” to “Fixed, not yet flighted”

  • Hello,

    Thank you all for providing so many updates. One source of volatility in the imaging code has been fixed to make this repro work correctly. The fix will be available in build 16267 and will not be pushed to older versions. If you find additional examples that are not fixed, please file new bug reports to cover those.

    Best Wishes,
    The MS Edge Team

  • Thank you for your response and for having solved the bug. Maybe issue #7115734 was related and has been solved as well?

  • I still see this bug in:
    Microsoft Edge 40.15063.674.0
    Microsoft EdgeHTML 15.15063

    When can we expect the build 16267 (more or less)? If the current build is 15063, as I understand it, 16267 seems like a very distant future. Having to wait such a long time for a fix is disappointing.
    Cheers,
    Tom

  • Hey Thomas, thanks for writing - the fix will be in Edge 16 which ships today so users on Windows 10 will begin getting the updates that include this fix.

  • That’s fantastic, thank you very much Greg.
    I checked today, and no update was available for my PC yet, so I guess I just must wait patiently until it appears.
    Cheers,
    Tom

  • Yeah, they roll it out in waves and it isn’t one massive download for all users of Windows 10, as you can imagine this would be large strain on the infrastructure.

  • I can confirm this bug as well. I work for an agency and we’ve heard of 3 instances of this within the past 2 days.

    If you’re looking for a fix, a hotfix, a workaround, a work-around, a solution or a way to ‘get past’ this bug (all written for the CTRL-F’ers out there, - no pun intended), then I’ve written one here:

    https://stackoverflow.com/questions/47076536/images-are-being-squished-in-microsoft-edge-16-small-images-in-edge/47076537#47076537

    I’m not posting it in here, since keeping the thread in StackOverflow makes comments and additions easier to maintain.
    The fix is based on Simon P. comment from above (I will buy him a beer if I ever meet him).

  • I think the title is incorrect as the fix is in Edge 16. The issue described above is in 13-15. If you are indeed seeing this in EdgeHTML 16, of which we have verified on all repros we’ve been provided do not repro, please let me know. To aid in the discussion as you noted, I’ll move over to stackoverflow as well.

You need to sign in to your Microsoft account to add a comment.

Sign in