UserAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.47 Safari/537.36

Example URL:
https://jsfiddle.net/s9uqr7dg/1/

Steps to reproduce the problem:
1. Go to https://jsfiddle.net/s9uqr7dg/1/
2. In the preview panel. The four text samples on top use box-decoration-break, the four on bottom do not.

What is the expected behavior?
The size (shown in red) of the top four container <div>s should be equal to the size of the text.

Also, text should be aligned on the left side for left-aligned text, or right for right-aligned text.

What went wrong?
The width of the container <div> is slightly smaller than it should be. This causes the text to be misaligned and at times drawn outside the container <div>.

What appears to be happening is the <div>'s width is equal to the <span>'s width without -webkit-box-decoration-break applied.

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No 

Did this work before? No 

Does this work in other browsers? Yes 

Chrome version: 51.0.2704.47  Channel: n/a
OS Version: Ubuntu 14.04
Flash Version: Shockwave Flash 22.0 r0

If you turn -webkit-box-decoration-break on or off, this change is not reflected immediately. A property affected by -webkit-box-decoration-break (padding, border-radius) must be modified to see the changes.