1274755 - transform: translate moves the content of the element unexpectedly

Status: NEW

(Core :: Layout: Form Controls, defect)

Description

[cyril.auburtin]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:49.0) Gecko/20100101 Firefox/49.0
Build ID: 20160520030251

Steps to reproduce:

http://recordit.co/pTx0NFcHX3, you can see that the buttons goes all up after applying a new translate to the element, it happens strangely only on the top .text element

non-working version: http://output.jsbin.com/borece/12

other working version: http://output.jsbin.com/borece/11 not using css3 transforms

I'm sorry, I tried during one hour to isolate this bug, but couldn't


Actual results:

the content inside the translated element (the toolbar) moves


Expected results:

the content inside the translated element (the toolbar) shouldn't move

the only difference between http://output.jsbin.com/borece/11 and http://output.jsbin.com/borece/12 is that the toolbar is positioned with transform: translate(left, top) instead of left and top css properties:

Comment 1

[u554753]

Hello Cyril,

I can reproduce the issue with the following specifications:
Mozilla/5.0 (Windows NT 10.0; WOW64; rv:49.0) Gecko/20100101 Firefox/49.0

Might this be related to Bug 1080478?

Comment 2

[cyril.auburtin]

Yes, related, but he didn't leave a minimal testcase either

maybe it's related to the mix of flexbox and transform: translate

Comment 3

[Timothy Nikkel (:tnikkel)]

I think the slight movement of the buttons is caused by them going from an active transform layer to an inactive layer.