Srcset and Sizes setting image height to 30px

Confirmed Issue #7778808 • Assigned to Greg W.

Details

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

Sign in to watch or report this issue.

Steps to reproduce

I am seeing a really weird bug in IE Edge when using images with srcset (and sizes) the height is getting set as 30px. It is very inconsistent, but I can see/replicate it with caching turned off.

Can anyone else replicate it at all?

Here are two pages to test;
http://www.geomatrix.co.uk/marine-produ…/magnetic/tvg-frame/
http://www.grommets.co.uk/news/

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!

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

Sign in