Polyfill Chrome update bug

[perttumyry]

I'm using the polyfill and I have an element which should stick to the top of the page. The element has following CSS styles.

top: 0;
bottom: auto;

The element sticks to the top of the page correctly, but when scrolling the page back up it doesn't unstick properly and the polyfill updates the fixedsticky-off class only when I have scrolled the page all the way up.

I can reproduce this issue also on the test page at http://filamentgroup.github.io/fixed-sticky/demos/demo-opt-out-native.html

This seems to happen, because the jQuery css method returns the computed value in Chrome if the element is visible. So even I have CSS declaration bottom: auto in my element the css('bottom') returns 0px in Chrome whereas it returns auto with Firefox. Thus the polyfill gets confused and thinks the element sticks to both top and bottom.

This bug can be solved with a rather simple trick of hiding the element, reading styles and then restoring the original display value of the element.

In the version 0.1.7 inside if( !position ) block on line 84 I added the following two lines of code.

var originalDisplay = $el.css( 'display' );
$el.css( 'display', 'none' );

Then at the end of the block on line 105 I added this line of code to restore the original display value to the element.

$el.css( 'display', originalDisplay );

After these changes the polyfill seems to work correctly also in Chrome.

There were no issues at all when using the native position: sticky, but I want to specifically use the polyfill as I want to define different styles to an element which is stuck. At the moment browsers do not provide :stuck pseudo class or any other way to change styles of a stuck element.