CSS object-fit fails to apply to <canvas> element #EdgeBug

External Issue #13603873


Sep 6, 2017
This issue is public.
Reported by 9 people

Sign in to watch or report this issue.

Steps to reproduce


0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “James M.”

      Changed Assigned To to “Scott L.”

      Changed Assigned To to “Christian F.”

      Changed Assigned To to “bbrinza”

    • This is a known issue. It is not supported on any element other than IMG at this point. This was an implementation trade-off based on low usage on the web (it is better for us to have object-fit only working on images than not to have it at all) but fixing this is of course always on the table based on changing usage patterns.

    • Microsoft Edge Team

      Changed Status to “External”

    • This issue has been resolved External. This means this issue may require a new feature to be implemented or other work that is more significant than a typical bug. You may be able to find more information on this issue by searching for related features on status.microsoftedge.com and uservoice.microsoftedge.com.

    • Wow, I can’t believe what I am reading! Edge is the last browser to catch up with a working standard and it can’t be even done properly? What about videos?

    • “it is better for us to have object-fit only working on images than not to have it at all”

      I don’t think that’s true at all. I’ll let the code speak for itself.

      video {
           * Some amazeballs css for browsers that do not support object-fit.
      @supports (object-fit: cover) {
          video {
               * Insert resets for the amazeballs css here
              object-fit: cover;

      And as a side note, I suspect the low usage is partly because any fallback is far from graceful.

    • I also believe that the low usage of this feature is due to it not being implemented in all browsers.

      I was very much looking forward to using this in a video player I’m working on, and I’m quite disappointed that it didn’t make it into this release.

      I don’t believe this issue can be marked as resolved/completed.

    • I agree with the other commenters. I have two clients who have asked to have a silent video playing in the background of their respective sites. The video is intended to fill the whole viewport, and it works in Firefox, Chrome, and Safari, but not Edge.

    • Backing the latest commenters. Usage is low because browser support is missing especially from Edge.

    • This is a feature that I could implement on so many landing pages. We’re doing polyfills for now, but the native solution would be best and uncomplicated

    • I agree. This needs to be fixed in a near future update. For fullscreen videos in pages it’s a must have.

    • @Francois R On uservoice this has 4214 votes and 85 comments complaining about object-fit only works for img tags.

      The chart at caniuse.com almost speaks for itself: This feature is rarely used because of Internet Explorer and Edge. I normally have to support IE11 in current projects, which means that if you fix this, then it will be 2-3 years before I and other web developers can actually use this.

      I have trained new web developers and I always see someone using object-fit and have to tell them, that they can not because of lack of support in Edge. Some will do it anyway but please don’t ever base any priority from current usage. When you develop for the web you develop for the lowest common denominator. That means that usage will always be low for features that is not supported across all browsers.

    • Just wanted to chime in to agree that it’s incredibly obnoxious that this only works for img tags.

    • “Well, no one uses this thing we haven’t implemented correctly” is an answer that exemplifies why devs don’t take Edge seriously.

    • For all those who develop WebRTC/ORTC applications, not having object-fit:cover when rendering webcam videos is an absolute pain.

      I hope you Edge guys implement it (not just for img).

    • We won’t implement because noone is using it, but noone is using it because we haven’t implemented it. Nice Catch-22. Common sense should tell you that full-screen video and canvas without hackery would be useful in a dev’s toolbox.

    • +++++++++++++++++++++++++++++++++++++++++
      Thank you all for showing your support for the feature.

      We understand this feature would be useful to have on video and canvas, but those elements are dynamic and hardware-accelerated, which means the code we wrote to support images simply does not work in those scenarios.

      Writing code that works for these other elements requires a different kind of expertise than implementing object-fit for images. We made the difficult decision to ship a partial feature here, but did so to unblock the vast majority of the developers out there. We will eventually complete our object-fit implementation, but it’s going to have to compete with all the other priorities.

      Please continue voting for the following user-voice so we can keep track of your interest:

      I added an Microsoft Edge status entry to keep track of this feature extension.

    • Perhaps for future partially-implemented features, Microsoft (and other browser vendors) would consider adding a corresponding custom CSS property with a browser-prefix so that we can use something like this in future to work around the Edge-only problem:
      @supports (object-fit: cover) and not (-ms-partial-implementation: object-fit-video)

      At least that would give a workaround.

    • -_-

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

    Sign in