Confirmed on Linux and CrOS, assuming all.

Over to cbiesinger for further triage.

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/2559d25930929daaa397b783b86633163169805e

commit 2559d25930929daaa397b783b86633163169805e
Author: michaelpg <michaelpg@chromium.org>
Date: Thu Jun 09 19:29:38 2016

MD Settings: Workaround for section expand/collapse animation jank.

Temporary workaround for  crbug.com/617287  by using margin instead of padding.
The result is not 100% identical but is very close.

The transition bug this fixes is the jump right (and left) at the start (and
end) of the subpage open animations.

BUG= 589681 ,  617287 
R=dschuyler@chromium.org
CQ_INCLUDE_TRYBOTS=tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2041083002
Cr-Commit-Position: refs/heads/master@{#398981}

[modify] https://crrev.com/2559d25930929daaa397b783b86633163169805e/chrome/browser/resources/settings/settings_page/main_page_behavior.js
[modify] https://crrev.com/2559d25930929daaa397b783b86633163169805e/chrome/browser/resources/settings/settings_page_css.html

> the inner div is offset *horizontally* as well as vertically 

I think you mean "instead of" rather than "as well", based on the screenshot and my testing?

If so, I have a fix. If not, I didn't understand the issue :-)

https://codereview.chromium.org/2052243003/

#5: yes, I think that's what I meant.

In fact, `padding-left` exhibits the opposite behavior: it offsets the fixed-position div vertically *instead of* horizontally.

So I guess I could have landed a much simpler workaround by using padding-left instead of padding-top... haha.

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/2559d25930929daaa397b783b86633163169805e

commit 2559d25930929daaa397b783b86633163169805e
Author: michaelpg <michaelpg@chromium.org>
Date: Thu Jun 09 19:29:38 2016

MD Settings: Workaround for section expand/collapse animation jank.

Temporary workaround for  crbug.com/617287  by using margin instead of padding.
The result is not 100% identical but is very close.

The transition bug this fixes is the jump right (and left) at the start (and
end) of the subpage open animations.

BUG= 589681 ,  617287 
R=dschuyler@chromium.org
CQ_INCLUDE_TRYBOTS=tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2041083002
Cr-Commit-Position: refs/heads/master@{#398981}

[modify] https://crrev.com/2559d25930929daaa397b783b86633163169805e/chrome/browser/resources/settings/settings_page/main_page_behavior.js
[modify] https://crrev.com/2559d25930929daaa397b783b86633163169805e/chrome/browser/resources/settings/settings_page_css.html

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/7640d892c09f7f8307648de38ca2e29a625dcc10

commit 7640d892c09f7f8307648de38ca2e29a625dcc10
Author: cbiesinger <cbiesinger@chromium.org>
Date: Wed Jun 15 14:50:55 2016

[css-flexbox] Fix handling of borders/padding for abspos items

We can't use the flowAware functions for these because they are
unaffected by the flex-direction. Use regular block functions instead.

R=szager@chromium.org
BUG= 617287 

Review-Url: https://codereview.chromium.org/2052243003
Cr-Commit-Position: refs/heads/master@{#399896}

[add] https://crrev.com/7640d892c09f7f8307648de38ca2e29a625dcc10/third_party/WebKit/LayoutTests/css3/flexbox/border-and-padding-abspos.html
[modify] https://crrev.com/7640d892c09f7f8307648de38ca2e29a625dcc10/third_party/WebKit/Source/core/layout/LayoutFlexibleBox.cpp

Your change meets the bar and is auto-approved for M52 (branch: 2743)

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/10f49aac698899ab7be5e452fe73c2f7793e40f5

commit 10f49aac698899ab7be5e452fe73c2f7793e40f5
Author: Christian Biesinger <cbiesinger@chromium.org>
Date: Thu Jun 16 14:08:11 2016

[css-flexbox] Fix handling of borders/padding for abspos items

We can't use the flowAware functions for these because they are
unaffected by the flex-direction. Use regular block functions instead.

R=szager@chromium.org
BUG= 617287 

Review-Url: https://codereview.chromium.org/2052243003
Cr-Commit-Position: refs/heads/master@{#399896}
(cherry picked from commit 7640d892c09f7f8307648de38ca2e29a625dcc10)

Review URL: https://codereview.chromium.org/2065383005 .

Cr-Commit-Position: refs/branch-heads/2743@{#367}
Cr-Branched-From: 2b3ae3b8090361f8af5a611712fc1a5ab2de53cb-refs/heads/master@{#394939}

[add] https://crrev.com/10f49aac698899ab7be5e452fe73c2f7793e40f5/third_party/WebKit/LayoutTests/css3/flexbox/border-and-padding-abspos.html
[modify] https://crrev.com/10f49aac698899ab7be5e452fe73c2f7793e40f5/third_party/WebKit/Source/core/layout/LayoutFlexibleBox.cpp

Verified the issue on Chrome Beta# 52.0.2743.49 on Windows 7, Mac OS X 10.11.5 and Ubuntu 14.04 and is not working as intended.
Attaching a screenshot for reference.
@cbiesinger -- Could you please look into the issue and provide an update.
Thank You.

Deleted: 617287.jpg 108 KB

	617287.jpg 108 KB View Download

msrchandra: Thanks for the testing -- that's actually the correct rendering, believe it or not! (Both lines of text have the same offset from the top and no offset from the left)

As per # 14, marking this as Verified as the screenshot in # 13 shows the correct rendering.

Fixed?

Yes, this should be fixed. Do you still see this bug?

What about display: grid?

Yes, what about grid? I don't think that has this problem?

I don't see any issue with Grid Layout. Am I missing something?