Chrome Version       : 60.0.3112.113 (Windows)
URLs (if applicable) : https://jsfiddle.net/h7hm4agj/4/
Other browsers tested:
              Firefox: OK
 Canary (62.0.3189.0): FAIL

What steps will reproduce the problem?
(1) Navigate to https://jsfiddle.net/h7hm4agj/4/
    OR open the attached test.html in the browser directly
(2) Scroll down inside the bordered div area where a pink square resides,
    so that the pink square sticks to the top as position:sticky obligates it.
(3) Resize the browser window !horizontally!.
(4) The pink square should have glitched out, jumping down in it's parent div.
(5) When you scroll in the parent div now, the pink square should stay fixed
    in the position where it jumped when window resized, ignoring all
    scrolling actions.

(6) To *fix* the pink square and restore it's original behavior scroll inside
    the parent back up to the top and resize the window again. The pink square
    should now jump to it's original location, and again behave like it is
    supposed to according to position:sticky.


What is the expected result?
  Pink square should not jump around when a resize update happens,
  but continue on its duty as a display:sticky styled element.


What happens instead?
  As stated above, it jumps down
  IF it is currently sticking to the top of it's parent
  AND the viewport is resized.

Please provide any additional information below. Attach a screenshot if
possible.
  Originally discovered for the <img> tag, where it would behave like
  the pink square in the example above. I supposed however, and it seems
  to be correct, that any element with display:inline-block would behave this way.

  The screenshot compilation of the bug is attached as pinksquare.png

 

Deleted: test.html 433 bytes

test.html 433 bytes View Download

Deleted: pinksquare.png 102 KB

	pinksquare.png 102 KB View Download