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

External Issue #13603873

Details

Created
Sep 6, 2017
Privacy
This issue is public.
Reports
Reported by 6 people

Sign in to watch or report this issue.

Steps to reproduce

Attachments

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.

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

    Sign in