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)
Tracking
()
UNCONFIRMED
People
(Reporter: andrej.okonetschnikow, Unassigned)
Details
Attachments
(1 file)
(deleted),
image/png
|
Details |
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
Updated•13 years ago
|
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.
Comment 3•10 years ago
|
||
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.
Comment 6•10 years ago
|
||
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
Updated•2 years ago
|
Severity: normal → S3
You need to log in
before you can comment on or make changes to this bug.
Description
•