firefox requires 'scroll' to be set

[jsdw]

..otherwise setting scrollTop and scrollLeft does nothing (this is firefox 40.0.3), and thus resize detection does not work.

This is hinted at in the MDN page for scrollTop at https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop

specifically the line:

"When an element content does not generate a vertical scrollbar, then its scrollTop value defaults to 0."

setting overflow:scroll doesn't seem to have any adverse effect in my tests so far, though might have some impact on very tiny elements! a solution might be to also set top/left/bottom/right (or one or 2 of those) to negative values, so that there is always room for a scroll bar to exist. I haven't made this tweak.

[marcj]

I guess this is ok for the moment. Better than not working at all :) Thanks!

[jsdw]

I still seem to having problems now even with this; I think the problem is actually not to do with overflow:scroll (though I'm sure I was having issues with that not being set at one point) but something a little more subtle, because occasionally everything works in firefox but most of the time it does not. Perhaps it is something specific to my setup/test case; I'll keep investigating!

[marcj]

Alright, then we should revert this, when this PR didn't change anything.

[jsdw]

that sounds sensible!

[jsdw]

I have gotten to the bottom of this I think; I had an element with display:none as a parent of the one I was trying to monitor resize events for (well, it was display:none until some data had finished loading), and in this case firefox ignores the scroll settings and then resize refuses to work when the element is later made visible. Chrome it seems is fine with this and still works.

This is the same as issue #46.

As a note; I also tried https://github.com/procurios/ResizeSensor mentioned in #74 but it has the exact same issue.

The workaround is to use a combo of visibility:hidden + position:absolute instead of display:none to hide parent elements.

Another workaround which I might implement is to find any parent elements with display:none and if any exist, monitor them and reset() when all display:nones go away. At least this would add no overhead in the normal working case, and yet allow it to work in te display:none case too (I use Angular as well so display:none is not an uncommon thing to run into!)