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

Example URL:

Steps to reproduce the problem:
1. load attached testcase

What is the expected behavior?
The pink box should be in the upper right corner of the blue box.

What went wrong?
The pink box is instead in the upper right corner of the page.

Does it occur on multiple sites: N/A

Is it a problem with a plugin? No 

Did this work before? N/A 

Does this work in other browsers? Yes 

Chrome version: 51.0.2704.79  Channel: n/a
OS Version: Ubuntu 16.04
Flash Version: 

https://drafts.csswg.org/css-transforms/#transform-property specifies that a value of 'transform' other than none establishes a containing block for absolutely and fixed positioned elements.

Chromium does this correctly for elements with a transform that are display:block, but not those that are display:inline.  Chrome also does this correctly for display:inline elements that are position:relative.

So you'll see the correct behavior if you make either one of the following two modifications to the testcase:
 A. remove 'display:inline' from the div that has it
 B. change 'transform: translate(0px)' to 'position: relative'
 

Deleted: float-relpos-cb.html 321 bytes

float-relpos-cb.html 321 bytes View Download