DmitryBaranovskiy / raphael

JavaScript Vector Library
https://dmitrybaranovskiy.github.io/raphael/
MIT License
11.27k stars 1.67k forks source link

offsetWidth and offsetHeight properties will be deprecated #1032

Closed vebersol closed 8 years ago

vebersol commented 8 years ago

I've got this message from Chrome Devtools:

'SVGElement.offsetWidth' is deprecated and will be removed in M50, around April 2016. See https://www.chromestatus.com/features/5724912467574784 for more details. application.js:3 'SVGElement.offsetHeight' is deprecated and will be removed in M50, around April 2016. See https://www.chromestatus.com/features/5724912467574784 for more details.

Does it has negative impact on Raphael code?

minhyeong-kim commented 8 years ago

+1

minhyeong-kim commented 8 years ago

There is 4 offsetWidth, offsetHeight access codes in raphaeljs 2.1.4

1. raphael.vml.js

Line 276:

o._.fillsize = [this.offsetWidth, this.offsetHeight];

This function is supplied for callback for img.onload event handler. so this is IMG element. also VML is not under consideration in deprecation issue.

2. raphael.svg.js

Line 521:

R._preload(isURL[1], function () {
    var w = this.offsetWidth,
        h = this.offsetHeight;
    $(el, {width: w, height: h});
    $(ig, {width: w, height: h});
});

This function is supplied for callback for img.onload event handler. so this is IMG element. (see R._preload methods)

Mysterious thing is, loading image in R._preload always fail. i have no idea for that.

3. raphael.core.js

Line 2390:

return {
    container: container,
    width: container.style.pixelWidth || container.offsetWidth,
    height: container.style.pixelHeight || container.offsetHeight
};

inside of R._getContainer(). this method seems to use for normalize Raphael() initializer.

The API reference of Raphael() has no arguments type SVGElement. no problem.

Line 3490:

paperproto.getSize = function () {
    var container = this.canvas.parentNode;
    return {
        width: container.offsetWidth,
        height: container.offsetHeight
    };
};

As you can see the container is parent node of canvas. so it is HTML element.

ArviZ commented 8 years ago

@minhyeong-kim, thanks :+1:

tomasAlabes commented 8 years ago

Guys could you take a look at that PR and try it in your envs? I will merge it if you give the ok. Thanks

tomasAlabes commented 8 years ago

Ok, after the @minhyeong-kim comments (thanks!) and re-reading the analysis better I guess there are no needed changes for this right? Though I'm curious if the chrome error appears because the offsetHeight/Width attrs are being requested on an SVGElement or if it's just in case. @vebersol do you see in your app a case where raphael is calling SVGElement.offsetWidth/Height?

vebersol commented 8 years ago

Hi @tomasAlabes,

We don't use this property as far as I could see here. I think it's just in case.

tomasAlabes commented 8 years ago

Yeah, I agree. Closing this issue. Thanks everybody for the feedback.