anselmh / object-fit Goto Github PK

package.json is for npm. It shouldn't contain bower install as postinstall. You should give to dev a /dist version. (and still make it work with bower if you want, yes).

I may be mistaken, but it seems various problems are stemming from attempting to auto-detect usage of object-fit?

If this is true, wouldn't it make sense to drop that in favour of explicit usage? Like this for example: https://github.com/steveworkman/jquery-object-fit

Seems simpler, and I think it's reasonable to expect people using object-fit to be prepared to add polyfill code to their projects.

When using external CSS (like a CDNed CSS, ext. Webfonts) Firefox throws an error in part of our script:
resp. https://gist.github.com/ydaniv/3033012/#file-mozgetmatchedcssrules-js-L23

There are some hints for this here: http://stackoverflow.com/a/5323868 and http://stackoverflow.com/questions/3211536/accessing-cross-domain-stylesheet-with-cssrules.

The issue, solution and circumvention hack should be well documented so authors don't run into it not knowing what is going on.

Just tried this out in IE11 and it is not working. It looks like the issue is that <x-object-fit> has it's parent container's styling applied to it.

Here's the code:

HTML

<div class="img_container img_container-portrait">
  <img class="img-cover" src="https://placeimg.com/640/480/any" alt="" />
</div>

CSS

body {box-sizing: border-box;}
*, *::before, *::after {position: relative;box-sizing: inherit;}

.img-cover {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.img_container {
  width: 50%;
  max-width: 25rem;
  margin: 5rem auto;
  overflow: hidden;
  border: 2px solid #313131;
}

.img_container-portrait::before {
  content: '';
  display: block;
  padding-top: 130%;
}

JS

window.objectFit.polyfill({
  selector: '.img-cover',
  fittype: 'cover',
  disableCrossDomain: 'false'
});

Here is the resulting html:

<div class="img_container img_container-portrait">
  <x-object-fit class="x-object-fit-cover" style="margin: 5rem auto; border: 2px solid rgb(49, 49, 49); border-image: none; width: 50%; overflow: hidden; max-width: 25rem;">
  <img class="x-object-fit-taller" alt="" src="https://placeimg.com/640/480/any" data-x-object-relation="taller">
  </x-object-fit>
</div>

You can see that <x-object-fit> has the parent's styling in it's style attribute.

JSFiddle Example

Due to a bug in getMatchedCSSRules in Microsoft Edge this polyfill won’t work as expected in Microsoft Edge. As this function is basically the heart of the polyfill, I have no clue how to fix this without refactoring the whole polyfill (which due to other restrictions is unwanted).

I’m very sorry about this. In case anyone has a solution, please let me know or send a Pull Request.

Hello,

Is the polyfill still under development?

I've tested the examples using ie 8 and 9, using the download without modification and non of the examples work.

Cheers, Stephen

In src/polyfill.getMatchedCSSRules.js you are using objectfit as a global variable, which is not set, if the polyfill is loaded via an AMD module loader.

Code that throws the exception "ReferenceError: objectFit is not defined": if (objectFit.disableCrossDomain == 'true')

Currently the polyfill is not usable when using an AMD loader…

Just wanted to point out that this is missing one of the property values: scale-down.

From W3C Spec:

‘scale-down’
Size the content as if ‘none’ or ‘contain’ were specified, whichever would result in a smaller concrete object size.

obect-fit.js is very slow on firefox

I think the probleme is getMatchedCSSRules polyfill

Image shows until the JS is loaded, at which point it disappears. Tested in IE11, IE10 and IE9.
No JS errors.

It should be --save flag not --safe

Thanks for the awesome work

Regards

It just hangs and doesn't apply the polyfill.

There's some CORS advice in the README.md that suggests "use-credentials" would work with *, but it won't. If you include credentials the server needs to reply with two headers, one of which includes the origin on question.

@primozcigler has developped a viable fallback for IE and Edge see here :
https://medium.com/@primozcigler/neat-trick-for-css-object-fit-fallback-on-edge-and-other-browsers-afbc53bbb2c3

You should consider adding a warning to the readme about using this polyfill.

It has 677 stars but you've stated in #46 that you are no longer actively developing it. Plus, there is no support for Microsoft Edge (#45), and some quite serious problems (#38, #23) that suggest it is slightly broken.

Some might miss this info and dive into it - best for them and for this project to be up front about it's state.

You can use external polyfill of requestAnimationFrame. It's a little smaller. And dependencies let the code be smaller.

I downloaded the zip, and it seems like the polyfill doesn't get activated for Firefox.

First, I tried the polyfill on my site. In IE9, it wasn't displaying as intended. So, I took your example and tried it.
https://github.com/anselmh/object-fit/blob/master/tests/index-cover.html

In IE9, it's not working. No errors on the page. Native browsers that support object-fit applied to <img> display just fine.

hi, i have been trying to make this work on a circle container, but unsuccessfully so far. I have tried to add the border radius 50% in my selector, but it gets ignored and when I use an extra class the object-fit does not work.

Any suggestions and help would be great . Thanks

Maybe a duplicate of #23

I just tried the included tests in IE9 and they don't seem to work. All files are being loaded and there are no errors in the console. However, the image is missing for an unknown reason.

IE version: 9.0.8112

Works fine in IE10. Let me know if you need more information.

It hangs and fails on each image the polyfit is applied to:
https://comeround.bbpdev.com/__dev/mph/

I at least found some information what causes the trouble and makes Firefox slow and unresponsive when dealing with multiple images here. It’s the selector matching and generally getting the computedStyles from the elements and re-applying them.

François Remy (@FremyCompany) wrote his own parser based on Tab Atkins’. Probably this will perform better and with less errors than the currently used one.

Sources

• https://github.com/FremyCompany/css-grid-polyfill/blob/master/README-PARALLIA.md
• https://github.com/FremyCompany/css-grid-polyfill/blob/master/src/core/css-cascade.js

Hopefully I’m able to test this out in the next weeks. I’ve started a branch here, so if you want to try helping out, please use this branch as base.

It might also solve the CORS/CSP issue we’re currently facing. cc @ketri.

Less of an issue, more of a support request.

I'm currently trying to implement the polyfill on a website that uses infinite-scroll and I need some method of re-running the polyfill every time new content is loaded in. The first initialisation works great, but does not affect the newly loaded content.

I've tried calling objectFit.polyfill() repeatedly, however it returns the error Can't execute code from a freed script, which is apparently related to the use of iframes within the polyfill.

If there's some way of being able to run the polyfill several times without encountering this issue?

Thanks!

As the title states, this does not work with videos with Microsoft's new browser on Windows 10 Build 10130.

On my project watching all image tags just crashes IE. Is it possible to add multiple css selectors?

https://github.com/anselmh/object-fit/blob/master/src/polyfill.object-fit.core.js#L134 and https://github.com/anselmh/object-fit/blob/master/src/polyfill.object-fit.core.js#L143 mean that any classes on the default image get replaced completely by the object-fit polyfill.

My issue is that I am using @aFarkas's https://github.com/aFarkas/lazysizes which works with the class lazyload to watch for images to lazy-load. When the object-fit polyfill is applied on the image as below, the image never loads because the class lazyload on the element is replaced with x-object-fit-taller.

Shall I create a pull request? the change would be to change it to: replacedElement.className += ' x-object-fit-taller'; for example.

The code for reference. Webpack+Babel used to package modules.

<img alt="" data-object-fit="contain" class="lazyload" data-srcset="..." data-sizes="..." src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">

/** Responsive Images Polyfill */
import 'picturefill';

/** Lazyload Images */
import '../../node_modules/lazysizes/plugins/bgset/ls.bgset.js';
import 'lazysizes';

/** Object-fit/Object-position Polyfill */
import objectFit from 'object-fit';

window.objectFit = objectFit; // because objectFit referenced on global object within polyfill code

let addEvent = () => window.addEventListener || window.attachEvent; 
// if above value and not fn IE complains about 'Invalid calling object' for some reason...
let event = ( window.addEventListener ? '' : 'on' ) + 'DOMContentLoaded';

addEvent()(event, () => {
    objectFit.polyfill({
        selector: '[data-object-fit="cover"]',
        fittype: 'cover',
        disableCrossDomain: true
    });

    objectFit.polyfill({
        selector: '[data-object-fit="contain"]',
        fittype: 'contain',
        disableCrossDomain: true
    });
});

Thanks for the great polyfill. I've got a question about IE 8 support as the readme is confusing.

This polyfill works in all major browsers as well as in IE8+.

Sounds like it does.

Google Chrome | yes | (from v31 natively via experimental flag)
Opera | 14+ | (from v18 natively via experimental flag)
Firefox | 4+ | (vote for this bug)
Internet Explorer | 8+ | (not implemented yet)

Sounds like it doesn't.

Firefox 35 does not implement object-fit, thus the importance of supporting in with your object-fit polyfill.

Firefox console reports

SecurityError: The operation is insecure. polyfill.object-fit.js:109

Line 109 is:

// get the style rules of this sheet
return toArray(stylesheet.cssRules);

Firefox 17.0.6 displays a popup indicating the script polyfill.object-fit.min.js:1 is not responding.

I'll try to get more information about this and keep you informed.

Firefox console outputs:
SecurityError: The operation is insecure.

And points towards this:

// get the style rules of this sheet
return toArray(stylesheet.cssRules);

Unfortunately in my project your plugin causes IE11 to crash. My project contains a lot of css-files and since the plugin is crawling all css files it seems to overcharge the browser. Why is it necessary to browse the css, when the plugin is initialized with explicit options like selector: 'img' and fittype: 'cover'? Is there any way to prevent css crawling?

IE9 shows a bit weird behavior. While it does apply the tags it sucks at maintaining the styles and then cuts the image dimensions in a completely wrong way.

This might be because we’re not using currentStyle (which is non-standard and has very ugly issues) for getting and setting the styles.

I was able to download the master file and run it in visual studio. However I have a video (via HTML5 video tag) that uses object-fit (and I need it to work in Internet Explorer). Does anyone know if it is just for images or can I apply it to videos as well?

Getting the following error in Firefox on my implementation and your test files:
I'm seeing:

Timestamp: 19/02/2014 11:39:33
Error: Error: Permission denied to access property 'mediaText'
Source File: http://comeround.bbpdev.com/__dev/all/object-fit/dist/polyfill.object-fit.js
Line: 32

Timestamp: 19/02/2014 11:39:56
Error: TypeError: CSS2Properties doesn't have an indexed property setter.
Source File: http://comeround.bbpdev.com/__dev/all/object-fit/dist/polyfill.object-fit.js
Line: 396

With a simple check of document.readyState === 'complete', the plugin could work even after the page is loaded.

One of the benefits of object-fit is the ability to apply a min-/max- height/width to an object and have the object fit the constrained dimensions. This works in browsers that natively support object-fit, but it does not work with the polyfill.

Initially I thought it might be related to https://github.com/anselmh/object-fit/blob/master/src/polyfill.object-fit.core.js#L54-L60. However that does not seem to be the case.