anselmh / object-fit Goto Github PK
View Code? Open in Web Editor NEWPolyfill (mostly IE) for CSS object-fit property to fill-in/fit-in images into containers.
License: MIT License
Polyfill (mostly IE) for CSS object-fit property to fill-in/fit-in images into containers.
License: MIT License
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.
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.
bower object-fit#* not-cached git://github.com:anselmh/object-fit.git#*
bower object-fit#* resolve git://github.com:anselmh/object-fit.git#*
bower object-fit#* ECMDERR Failed to execute "git ls-remote --tags --heads git://github.com:anselmh/object-fit.git", exit code of #128
Additional error details:
fatal: Unable to look up github.com (port anselmh) (nodename nor servname provided, or not known)
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.
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
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.