Open Bug 713833 Opened 13 years ago Updated 2 years ago

moz-transform:translate shows forms popup UI elements (auotcomplete popup, datalist) as for non-translated position

Categories

(Core :: Layout: Form Controls, defect)

9 Branch
x86
macOS
defect

Tracking

()

UNCONFIRMED

People

(Reporter: andrej.okonetschnikow, Unassigned)

Details

Attachments

(1 file)

Attached image Screen Shot 2011-12-28 at 10.53.58.png (deleted) —
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_2) AppleWebKit/535.7 (KHTML, like Gecko) Chrome/16.0.912.63 Safari/535.7 Steps to reproduce: Apply CSS transform to a form element with some inputs inside. I used a input type="text" with auto-fill enabled form but it applies also to any other suggest UIs such as with datalist. Actual results: OS UI elements such as auto-fill suggest dropdown for input are positioned as for non-translated form element. See a testcase: http://jsfiddle.net/6KPH6/ Also see the attached screenshot. Expected results: UI elements should be aligned with appropriate form elements. More specific case which is already fixed filed under: https://bugzilla.mozilla.org/show_bug.cgi?id=599938
Summary: moz-transform:translate shows forms UI elements as for non-translated position → moz-transform:translate shows forms popup UI elements (auotcomplete popup, datalist) as for non-translated position
I must update this bug as still alive, adding the following: HTML5 Validation popup shows on wrong position if related to elments that were been moved using CSS transform Validation popups are showed as the element were not been moved by the CSS tranform Also, this issue is on also on Windows, not only Mac OS X. User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:31.0) Gecko/20100101 Firefox/31.0 You can see a testcase here: http://codepen.io/Venerons/pen/bekpg
I ran into this bug. Data list's position does not update to match the element the list the element is displaying for.
I hit this one as well with my pages that use CSS3 transforms. My datalist is unusable -- it is very far from the input element. I would like to reinforce that this is not just an OSX issue, it happens on Windows 7 64-bit with FF29 and 30.
Windows 8.1 Firefox 32.0a2 happens for me as well. As was previously stated form validation, and datalists in Firefox are basically useless if you use any CSS3.0 transforms.
I ran into the same issue on windows 7 with FireFox 30 . Data list items are displaying nowhere close to the input element.
Bug 467442 landed on Firefox 33, currently in Nightly, and seems to have fixed the testcase in comment 0 for me.
Apparently, this bug is back. Confirmed with select lists by testing here: http://jsfiddle.net/robreact/7YQ7E/2/ And the more select lists you have mixed with other markup between them makes the position of the drop-downs even more mis-aligned than the above example. (e.g. not just vertical mis-alignment but also horizontal). Confirmed in two different mozilla browsers / OS's: Firefox 29.0 - Linux Firefox 35.0.1 - Windows see also bugs: 599938 and 691716
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: