Unable to reproduce the issue on Mac-10.12.2,Windows-7 and Linux Ubuntu-14.04 using Chrome stable version 56.0.2924.87 and canary 59.0.3035.0 with the steps mentioned in comment#0.
Please find the attached screen cast for the same.
kimatg@ could you please try in a clean profile without any extensions and let us know your observations if the issue still persists.

Thanks..

Deleted: Mac-699852.mov 6.9 MB

Mac-699852.mov 6.9 MB Download

I tried clearing resetting my profile then running the demo page in incognito mode. Still getting the same problem. Attached screen recording for reference.

Very strange, as I don't think any extension will affect CSS rendering behavior, and we're both on same version and platform...

Deleted: chromebug2.mov 8.4 MB

chromebug2.mov 8.4 MB Download

Thank you for providing more feedback. Adding requester "sureshkumari@chromium.org" to the cc list and removing "Needs-Feedback" label.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot

The only difference I notice between your environment (looking at the screencast video you uploaded), is Mac OS version (which I don't think affects this issue), and the 'Variations' values.

I tried running chrome with the --reset-variation-state option, but somehow it doesn't really remove the values in Chrome version information. If you can tell me how to completely disable the Field Test values I'll try testing again.

I reproduced the same bug with a clean profile and no extensions. Attaching video file for reference.

Deleted: chrome56bug.mov 9.5 MB

chrome56bug.mov 9.5 MB Download

I believe this issue is related to "retina/HiDPI/2x/3x" displays. I've got my external Samsung (HTHG300177, 2560x1440) monitor attached to my MacBook Pro (Retina, Late 2013). The problem does persist on the retina monitor, while completely disappearing when the windows is rendered on the external monitor.

You can reproduce the problem as follows; open the above codepen page on 1x external monitor, resize it appropriately, and drag the window to the 2x monitor. Screenshots are attached for reference. Notice the resolution of one of the images is just as twice as big, as in 2x.

EDIT: Changed the screenshot.

Deleted: Screen Shot 2017-03-09 at 9.38.36 PM.png 143 KB

	Screen Shot 2017-03-09 at 9.38.36 PM.png 143 KB View Download

Deleted: Screen Shot 2017-03-09 at 9.38.25 PM.png 333 KB

	Screen Shot 2017-03-09 at 9.38.25 PM.png 333 KB View Download

Able to repro on Mac 10.12.3 with retina display on stable version 56.0.2924.87 and on canary version 59.0.3035.0

Able to reproduce this issue on Mac (Retina) 10.12.3 using Chrome Stable version 57.0.2987.98 and Canary 59.0.3037.0.
Manual Bisect:
Good-56.0.2909.0-(Revision-429737)
Bad—-56.0.2910.0-(Revision—430103)

Per revision bisect info:
------------------------
You are probably looking for a change made after 429926 (known good), but no later than 429927 (first known bad).
CHANGELOG URL:
https://chromium.googlesource.com/chromium/src/+log/851c6f72587756eab07e345c2212c0d45c8c10e1..77a8c51a440e0741315ff5e9e77441b86cbbc56d

Review-Url: https://codereview.chromium.org/2468283005
flackr@ Kindly take a look and please help us to reassign this issue to a right owner if not with respect to this change.

Note:Issue not seen on Windows-7,MacBook Air-10.12.3 and Linux Ubuntu-14.04.
Thanks..

By the way, I could reproduce this issue on Windows 10 running latest Chrome (57) on 200% scaling (HiDPI) mode too.

Deleted: Capture.PNG 339 KB

	Capture.PNG 339 KB View Download

This bug has been merged into another similar bug which may be related, but this bug specifically refers to a situation where a sticky element is nested inside another sticky element.

This bug has not been fixed yet even until now (Chrome 60), open the same demo page(https://codepen.io/zvuc/pen/PpWOqv) in Chrome and you'll see that the inner headers don't display (they used to offset incorrectly before, now they just don't show at all) when page is scrolled to sticky the menubar, and scroll the inner list view nested in the menubar.

#14 - it has been a while since the other bug got fixed, so just file a new issue instead (if you could not find an existing open issue). You can comment here with the issue number.

I created a new issue here: https://bugs.chromium.org/p/chromium/issues/detail?id=754557