The border-radius and transforms are probably causing a mask layer to be created, which may introduce bluriness particularly if the transform causes a scale or a non-pixel-aligned translation. That explains why some positions/sizes do not seem blurry.

My guess is that before Chrome 58 the border radius did not even apply in this situation. We've fixed that bug and we will not revert the fix.

Can you remove the border-radius? I doubt it was applying in Chrome before M-58. Can you add a will-change: transform to the overflow scrolling container? That might remove the need for the mask.

This issue (blurriness) existed prior to Chrome 58.
will-change: transform has no impact.

It seems reasonable that this is being caused by a mask, as using a mode other than overflow: hidden also causes the issue to go away.

Thank you for providing more feedback. Adding requester "schenney@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

Looks like it's using transform: translate(-50%, -50%) to center. This is  issue 573146  where when 50% is a fractional value, and we don't pixel snap transform positions so if it is a composited layer it becomes blurry.

Scrolling contents are pixel snapped so using overflow: auto | scroll will make the problem go away, but it shouldn't go away with overflow: visible;

That issue seems to refer specifically to transform-3d, which this is not using.

The NextAction date has arrived: 2017-06-18

flackr@, could you respond to comment #8?

chris.john.hawkins@, is there any translate/scale/whatever on the content that is blurry? There is also some chance that the layout happens to give fractional position. And there have been some very recent changes in composited layer position rounding.

Could you try Canary? Could you open Developer Tools and look at the computed position of the blurry content to verify that it is a fractional value, and maybe tell us where that value is coming from?

The content has a 2D translation on it. The blurriness goes away if I disable the 2D transform OR turn off rounded corners. 

I still reproduce this on Canary.

I have attached a screenshot of the inspector for the element in question, which is _7y class on www.messenger.com. Playing a a game (such as Words With Friends) on Messenger.com then resizing the browser provides a consistent reproduction, depending on the viewport size (e.g. I consistently reproduce with a viewport size of 1536 x 686).

Deleted: Screen Shot 2017-06-28 at 1.23.31 PM.png 172 KB

	Screen Shot 2017-06-28 at 1.23.31 PM.png 172 KB View Download

The NextAction date has arrived: 2017-07-03

This got dropped for some reason. flackr@, still looking for analysis from you.