cee-chen / object-fit-polyfill Goto Github PK

Would it be possible to make attaching global listeners optional? I think the library should not have any side-effects unless the user opts-in somehow.

https://github.com/constancecchen/object-fit-polyfill/blob/763f6cafdff704e6957ddad164c281a75068656f/src/objectFitPolyfill.basic.js#L182-L187

your -o-object-filt:cover; it is not working

As objectFitPolyfill is already declared on window, I think that to add a parameter to it would be usefull so that we can use it with lazy loading images.

Something like this works well:

var objectFitPolyfill = function(element) {
    var media = typeof element === "undefined" ? document.querySelectorAll("[data-object-fit]") : [element];
    [..]
}

What do you think about that?

Installing via NPM is causing not a function error when using objectFitPolyfill();

// JS
import objectFitPolyfill from 'objectFitPolyfill'

// Object Fit Polyfill
objectFitPolyfill();

Removing objectFitPolyfill(); stops the error. My webpack config is as follows:

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    entry: path.resolve(__dirname, 'assets', 'main.js'),
    output: {
        path: path.resolve(__dirname, 'assets', 'dist')
    },
    module: {
      rules: [
        {
            test: /\.css$/,
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader',
                'postcss-loader'
            ]
        },
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env']
                }
            }
        }
      ]
    },
    plugins: [
        new MiniCssExtractPlugin()
    ],
    watch: true
}

EDIT:
It's worth knowing the script works using the data attribute. It's just the function that doesn't work.

We tried using this on one of our website to add object-fit:cover; functionality to the video being played. However, we hide this video when the user is on a mobile screen (below a certain width) by using display:none;
This causes the polyfill to occasionally throw an error: Cannot read getPropertyValue of null

Dear Constance,
I'm using the basic version with Edge 18 which has support for object-fit and partial support. Still polyfill is being applied. Hope you can help.
Best,
Bilal

It would be great to see some collaboration (isn't GitHub for this?) and see both solutions in one library to make it easier to decide which one to use.

I wonder if this is compatible with picturefill?

Doing a Bower download with bower install object-fit-polyfill.js retrieves an older fork.

Shouldn't it point to this very repo, since it's the original (and hopefully most updated) version?

Also there is a project with a similar name: bower install object-fit-polyfill which is currently an apparently unmantained, 1 year old repo and points to https://github.com/tonipinel/object-fit-polyfill.

Can you provide clearer instructions for those still using Bower?

Hi,

Since Edge 16 is on the market, this polyfill is not working for video's anymore.
Edge 16 is now supporting object-fit only for images. I think the scripts is not working because it thinks objectfit is supported for the Edge 16?

TypeError: objectFitPolyfill__WEBPACK_IMPORTED_MODULE_6___default(...) is not a function

Thanks, great polyfill! Would it be possible to add support for polyfilling object-fit on thecanvas element as well?

We're experiencing some issues using this (otherwise fantastic polyfill) in Edge browsers with partial support (versions 16, 17 and 18). The issue is that it will incorrectly calculate the object-fit placement of the images on page load in these browsers. But as soon as the user resizes the window, then it repositions perfectly.

So, I looked through the code to check how everything works and see if we were missing something or and an incorrect setup. In the code I found the setup where it waits for the image to load before doing the calculations, but this doesn't trigger for Edge browsers with partial support. This is due to the if-statement:

if (mediaType === 'img' && !edgePartialSupport) {
    if (media[i].complete) {
        objectFit(media[i]);
    } else {
        media[i].addEventListener('load', function() {
            objectFit(this);
        });
    }
}

Is there any reason why this is omitted if the Edge browser has partial support? It still runs all the same placement calculations as for Edge browsers with no support, so I can't see why this should include all browsers with partial support as well.

I've added a pull request to include Edge browsers with partial support as well, but I simply wanted to be 100% sure, that there isn't a good reason that I haven't thought of.

I also see this happening on the demo site in Edge (just remember to clear cache). See a screenshot of the error here:

First off, thank you! I have a potential feature request.

Is it possible to use or update this script with lazyloading images that have the image src on data-src?

Hi, thank you for this polyfill. It would be great if this issue could be solved someday.

objectFitPolyfill version:

/*----------------------------------------
 * objectFitPolyfill 2.3.0
 *
 * Basic, no-frills version -
 * Defaults to object-fit: cover and object-position: 50% 50%
 *
 * Made by Constance Chen
 * Released under the MIT license
 *
 * https://github.com/constancecchen/object-fit-polyfill
 *--------------------------------------*/

HTML

<figure>
    <img
           src="Images/img/figure.png"
           alt="Fullwidth Image"
           data-object-fit="cover"
           data-object-position="bottom"
     >
      <figcaption>This is an image caption</figcaption>
</figure>

CSS

figure {
    img {
      width: 100%;
      max-height: 600px;
      object-fit: cover;
      object-position: bottom;
    }
  }

Result in IE11:
https://prnt.sc/u1gme4

Looks like the <figure> tag needs a specific height.

If I remove this from the <img> tag:

  data-object-fit="cover"
  data-object-position="bottom"

It looks fine, except for the object-fit, as expected. See here: https://prnt.sc/u1glvz

If I add a specific height to the <figure> tag, like this:

figure {
    min-height: 700px; //here

    img {
      width: 100%;
      max-height: 600px;
      object-fit: cover;
      object-position: bottom;
    }
  }

The result is still not the one desired, as the image takes up the entire space and the caption is hidden. See here: https://prnt.sc/u1goax

Dear Constance (@constancecchen),

Thank you for sharing this nice polyfill with the community!!

It works fine, except to "fill" a video element in Edge. I have described it here, but I hadn't seen that issue was about "cover" (which works fine).

Would be nice if you could have a look at this.
Thanks in advance!
Bart

The latest version is not available with bower: https://asset-packagist.org/package/bower-asset/objectFitPolyfill

Also getting this while installing with composer:

  Problem 1
    - The requested package bower-asset/objectfitpolyfill 2.3 exists as bower-asset/objectfitpolyfill[v2.2.0, v2.1.1, v2.1.0, v2.0.5, v2.0.4, v2.0.3, v2.0.2, v2.0.1, v2.0, dev-master] but these are rejected by your constraint.
  Problem 2
    - The requested package bower-asset/objectfitpolyfill (locked at v2.2.0, required as 2.3) is satisfiable by bower-asset/objectfitpolyfill[v2.2.0] but these conflict with your requirements or minimum-stability.

I know this issue was opened already but I am experimenting the same errors, is there a workaround for this?

TypeError: objectFitPolyfill is not a function

I get this error in Firefox/Chromuim with version 2.0

It points to the lines at the bottom if the files where this functions is called. (I tested this locally with the uncompressed files)

Live example: https://www.asoundeffect.com/oscar-nominated-sound-arrival-deepwater-horizon-lala-land-hacksaw-ridge/

Hi,

I'm having an issue where the first image in a Bootstrap caraousel renders correct but any images after the initial one is "pushed down" 50% of the carousel high. This only happens in IE and Edge, Chrome shows all images as expected using normal CSS...

The first image:

Incorrect rendering:

If I disable this CSS property in Edge, it shows all images correctly

Is this a bug or am I doing something wrong? My implementation of the "inner carousel" is as follows:

<div class="carousel-inner" role="listbox">
    <div class="item active">
        <img data-object-fit src="images/carousel/MyImage1.jpg" alt="Image">
    </div>
    <div class="item">
        <img data-object-fit src="images/carousel/MyImage2.jpg" alt="Image">
     </div>
     <div class="item">
         <img data-object-fit src="images/carousel/MyImage3.jpg" alt="Image">
     </div>
     <div class="item">
         <img data-object-fit src="images/carousel/MyImage4.jpg" alt="Image">
     </div>
</div>

I tried to use this polyfill in a react app that is rendered on the server and it fails because it can't access the document.

ReferenceError: document is not defined
    at /##########/node_modules/objectFitPolyfill/dist/objectFitPolyfill.min.js:1:105
    at Object.<anonymous> (/##########/node_modules/objectFitPolyfill/dist/objectFitPolyfill.min.js:1:2863)
    at Module._compile (module.js:569:30)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/##########/server.js:1757:18)

Right now as a workaround I require it in the componentDidMount method of the component where I use it. But this is a bit cumbersome especially if I need it in multiple components.

Hi,

I got following error in script.

Uncaught ReferenceError: objectFitPolyfill is not defined error in objectFitPolyfill.min.js:1 in google chrome & mozilla firefox browsers.

I opened your demo page in BrowserStack using Windows 10 - IE11 and compared it to your demo page in Mac Mojave - Latest Chrome and they aren't matching leading me to believe it does NOT work in IE as mentioned.

Please help.

In edge 17 object-fit is not applied on

Edge 17 only has partial support for object-fit, see https://caniuse.com/#feat=object-fit.
The fix for edge 16 does not apply it self for Edge 17, since this poly-fill only looks for "Edge/16.".

I suggest just adding a regex until it has been confirmed fixed proper like:
var isEdge16 = window.navigator.userAgent.match(/Edge\/\d\d./) !== null

After reading through the code, this runs on page load and resize. If the URL changes through React, the script does not get reloaded and thus the objectFitPolyfill isn't called again. Is it possible to trigger the objectFitPolyfill function on URL change?

What do you think about implementing some kind of observer to apply the polyfill after dynamic inserted content, e.g.:

  var objectFitPolyfill = function(media, recursive) {
    if (!recursive) {
      (function(media) {
        var body = document.body;
        if (window.MutationObserver) {
            var observer = new MutationObserver(function() {
              objectFitPolyfill(media, true);
            });
            observer.observe(body, { childList:true, subtree:true });
        } else if (window.addEventListener) {
          body.addEventListener('DOMNodeInserted', function() { objectFitPolyfill(media, true); }, false);
          body.addEventListener('DOMNodeRemoved', function() { objectFitPolyfill(media, true); }, false);
        }
      })(media);
    }

...

Hi,

It would be nice to have a possibility to undo the object-fit property. Let's say I wan't to remove object-fit from my page dynamically. Maybe through a data property of the dom node, eg. data-object-fit-undoable. And so if it's set, then saving all the changed styles to some variable, and when I change the style back, I could call it by some function undoObjectFit($media). Or if it's better, undo everything with one call, but the first one would be enough for me.

Hi, is it possible to make this polyfill work with dinamically created video elements?
So that I can do something like this:

// Append video to the DOM
$video.html(videoHTML);

// run polyfill again
objectFitPolyfill();

(function (root, factory) {
if (typeof define === "function" && define.amd) {
// AMD - registered as an anonymous module
define(factory);
} else if (typeof exports === "object") {
// CommonJS
module.exports = factory();
} else {
// Browser global
root.objectFitPolyfill = factory();
}
})(this, function () {... //'this' in a strict environment would reference to 'undefined' thus creating an undefined error.

I noticed this error on projects where I have a baseline max-width: 100%; reset on various media tags (img, svg, etc).

Possible solution: Add max-width: none and max-height: none for safety into the inline CSS (right before line 42)?

Is this polyfill working when video container is set to width: 100% and height: 100%?

For example:

.video-container {
  position: relative;
  width: 100%;
  height: 100%
}

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

Thanks

I have heard a lot of critique of bower and a lot of people seem to prefer npm so I opted for that. But npm does not support installing form github repos if they do not have a package.json

Hi! Great plugin, using it all the time. 👍

I was wondering in what way I can import the basic version from npm in my JavaScript. Right now I have done:

npm install --save objectFitPolyfill

And in my JS:

import 'objectFitPolyfill';

Compiled via Babel. That works. But I want the basic version. How do I include that? I would like to do something like:

import 'objectFitPolyfill/basic';
// or
import basic from 'objectFitPolyfill';
// or
import { basic } from 'objectFitPolyfill';

Which doesn't seem to work. Any advice on this?

I have Atom setup with JSHint and the rules they use for the Twitter Bootstrap Project.

Its says: for lines 229+239: Don't make functions within a loop.

Not that into JavaScript but it probably would make sense to move this callback outside of the loop.

Also in the basic file of course.

Please correct the file name in bower.json file

"main": "dist/objectFitPolyfill.js", it should be "main": "dist/objectFitPolyfill.min.js",

Jagdish

Hi, I am using this polyfill with angular 5 project.

When page is getting loaded first time, it is not adding css classess/styles, but if I do some resizing of screen(let's say I open debugger tools), then it is working fine.