Last Comment Bug 599938 - TRANSLATION ONLY TRANSFORMS moz-transform:translate shows select dropdown content on non-translated position
: TRANSLATION ONLY TRANSFORMS moz-transform:translate shows select dropdown con...
Status: RESOLVED FIXED
[DON'T COMMENT IF YOUR TRANSFORM HAS ...
:
Product: Core
Classification: Components
Component: Layout: Form Controls (show other bugs)
: Trunk
: All All
: -- normal with 5 votes (vote)
: mozilla9
Assigned To: Timothy Nikkel (:tnikkel)
:
: Jet Villegas (:jet)
Mentors:
: 691716 (view as bug list)
Depends on:
Blocks: 664707 669887
  Show dependency treegraph
 
Reported: 2010-09-27 11:23 PDT by Peter van der Woude [:Peter6]
Modified: 2016-02-14 01:48 PST (History)
17 users (show)
tnikkel: needinfo? (dev)
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---


Attachments
testcase (399 bytes, text/html)
2010-09-27 11:23 PDT, Peter van der Woude [:Peter6]
no flags Details
patch (3.67 KB, patch)
2011-09-14 15:28 PDT, Timothy Nikkel (:tnikkel)
roc: review+
Details | Diff | Splinter Review
patch v2 (5.50 KB, patch)
2011-09-16 15:53 PDT, Timothy Nikkel (:tnikkel)
roc: review+
Details | Diff | Splinter Review

Description User image Peter van der Woude [:Peter6] 2010-09-27 11:23:20 PDT
Created attachment 478818 [details]
testcase

Mozilla/5.0 (Windows NT 5.1; rv:2.0b7pre) Gecko/20100927 Firefox/4.0b7pre ID:20100927041306

repro: open testcase

the selectbox content should be in line with the form
Comment 1 User image Boris Zbarsky [:bz] (still a bit busy) 2010-09-27 11:25:31 PDT
Mats, want to take a look?
Comment 2 User image Mats Palmgren (:mats) 2010-10-02 05:46:20 PDT
This bug is about 'translate', bug 455164 'rotate', bug 455170 'scale'.
I think they are all the same underlying problem that the CTM isn't
applied when painting the dropdown frame.  roc suggested looking at
GetTransformMatrix in bug 455164, but that's only used for transforming
event coordinates afaict.  Does anyone know where I should look to
fix painting?
Comment 3 User image Timothy Nikkel (:tnikkel) 2010-10-02 07:31:33 PDT
nsListControlFrame::BuildDisplayList is where the painting happens. But I think there'd be a lot of other things you'd need to change to.
Comment 4 User image Robert O'Callahan (:roc) (email my personal email if necessary) 2010-10-07 21:41:38 PDT
Actually drawing a rotated or scaled dropdown seems hard.

Hacking nsComboboxControlFrame::AbsolutelyPositionDropDown to compute a position that puts the dropdown near where the transformed nsComboboxControlFrame appears should not be hard.
Comment 5 User image AndreiD[QA] 2011-06-16 07:16:21 PDT
*** Bug 664707 has been marked as a duplicate of this bug. ***
Comment 6 User image Enoch Lau 2011-09-12 19:22:32 PDT
I work on the Google Maps API. Recently, we've disabled the use of CSS transforms in the Maps API on all versions of Firefox due to this bug - <select> drop-downs appear in the untranslated position when placed in an info window and the map is panned. CSS transforms were used to implement, for example, the continuous zoom as one goes from one zoom level to another.

Would I be able to ask whether there has been any progress resolving this issue, and perhaps what is the expected time frame for its resolution?

Thanks!
Comment 7 User image Timothy Nikkel (:tnikkel) 2011-09-14 11:49:21 PDT
I actually have started on this, so stealing.
Comment 8 User image Timothy Nikkel (:tnikkel) 2011-09-14 15:28:32 PDT
Created attachment 560261 [details] [diff] [review]
patch

Here's a hack that fixes this.
Comment 9 User image Robert O'Callahan (:roc) (email my personal email if necessary) 2011-09-15 01:19:29 PDT
Comment on attachment 560261 [details] [diff] [review]
patch

Review of attachment 560261 [details] [diff] [review]:
-----------------------------------------------------------------

I think we should compute the transform-to-root, transform the select frame's bounds by that transform, and then pretend b

::: layout/forms/nsComboboxControlFrame.cpp
@@ +524,5 @@
> +  }
> +  nsPoint translation;
> +  if (!is3DTransform && !transform.HasNonTranslation()) {
> +    gfxPoint pixelTranslation = transform.GetTranslation();
> +    PRInt32 apd = PresContext()->AppUnitsPerDevPixel();

Use "pc"

@@ +534,5 @@
> +    if (rootPC) {
> +      translation -= GetOffsetToCrossDoc(rootPC->PresShell()->GetRootFrame());
> +    } else {
> +      translation.x = translation.y = 0;
> +    }

Please put the calculation of this transform into a helper function either in this class or in nsLayoutUtils.
Comment 10 User image Timothy Nikkel (:tnikkel) 2011-09-15 11:00:08 PDT
(In reply to Robert O'Callahan (:roc) (Mozilla Corporation) from comment #9)
> I think we should compute the transform-to-root, transform the select
> frame's bounds by that transform, and then pretend b

What were you trying to say here?
Comment 11 User image Robert O'Callahan (:roc) (email my personal email if necessary) 2011-09-16 00:11:04 PDT
Nothing, just a comment I forgot to delete
Comment 12 User image Timothy Nikkel (:tnikkel) 2011-09-16 15:53:04 PDT
Created attachment 560642 [details] [diff] [review]
patch v2
Comment 13 User image Robert O'Callahan (:roc) (email my personal email if necessary) 2011-09-16 19:37:28 PDT
Comment on attachment 560642 [details] [diff] [review]
patch v2

Review of attachment 560642 [details] [diff] [review]:
-----------------------------------------------------------------

::: layout/forms/nsComboboxControlFrame.cpp
@@ +488,5 @@
>    return rv;
>  }
>  
> +nsPoint
> +nsComboboxControlFrame::GetCSSTransformTranslate()

GetCSSTransformTranslation
Comment 14 User image Timothy Nikkel (:tnikkel) 2011-09-18 15:01:21 PDT
http://hg.mozilla.org/integration/mozilla-inbound/rev/cd2472a58eda
and to fix up the build for only half fixing the last review comment
http://hg.mozilla.org/integration/mozilla-inbound/rev/3610977e5f7e
Comment 16 User image Peter van der Woude [:Peter6] 2011-09-20 10:45:13 PDT
Mozilla/5.0 (Windows NT 5.1; rv:9.0a1) Gecko/20110920 Firefox/9.0a1 ID:20110920030905

bug 664707 was set as dupe, however, that issue isn't fixed with this patch.

feel free to REclose this one and change dependency/status of bug 664707
Comment 17 User image Timothy Nikkel (:tnikkel) 2011-09-20 10:53:37 PDT
I just tested the testcase in bug 664707 and it worked correctly for me.

In any case if that bug is still not fixed then reopen it and remove its duplicate status and deps as necessary.
Comment 18 User image Enoch Lau 2011-09-20 16:42:41 PDT
Thanks for all your hard work on this bug - much appreciated!
Comment 19 User image Boris Zbarsky [:bz] (still a bit busy) 2011-10-04 13:05:52 PDT
*** Bug 691716 has been marked as a duplicate of this bug. ***
Comment 20 User image David Baron :dbaron: ⌚️UTC-8 2011-12-28 07:12:42 PST
Bug 713833 covers similar cases for other popups.
Comment 21 User image etbz 2015-02-03 20:03:57 PST
Apparently, this bug is back.

Confirmed by testing here: http://jsfiddle.net/robreact/7YQ7E/2/

Confirmed in two different mozilla browsers / OS's:
   Firefox 29.0 - Linux
   Firefox 35.0.1 - Windows
Comment 22 User image Timothy Nikkel (:tnikkel) 2015-02-03 21:53:15 PST
(In reply to etbz from comment #21)
> Apparently, this bug is back.
> 
> Confirmed by testing here: http://jsfiddle.net/robreact/7YQ7E/2/
> 
> Confirmed in two different mozilla browsers / OS's:
>    Firefox 29.0 - Linux
>    Firefox 35.0.1 - Windows

That testcase uses scale. This bug is only about translation transforms. Bug 455164 is about supporting transforms other than translation.
Comment 23 User image wragg75 2015-02-19 13:11:06 PST
With Mac/Firefox 35.0.1, I am seeing select menu options not reflect the translateX setting.

Fiddle: https://jsfiddle.net/wragg75/csmLLcg6/1/

The problem can be fixed/forced by toggling the transform property off/on, respectively.

Similarly, the problem can be fixed/forced by toggling the perspective property.
Comment 24 User image Timothy Nikkel (:tnikkel) 2015-02-19 14:07:53 PST
The perspective property means that the computed transform matrix for the affected node has more than just 2d components to it, so the matrix is not considered a translation only. Bug 893147 covers selects with perspectice.
Comment 25 User image Jordan 2015-02-27 10:24:47 PST
I'm seeing this issue when using a style that includes "transform: translate(0px,0px);". When any ancestor div of my flash content includes that style I see a mouse input offset in the flash content. Mouse move, mouse down, mouse up etc. all start hit testing incorrectly. Adding a third 0px in the style fixes the issue. If this bug is left unresolved we will be forced to implement a questionable workaround in our code. This code will be run by roughly 2 million users daily and we would prefer a proper fix to this bug. Please contact me if you need more information jordan.isaman@igt.com.
Comment 26 User image Jordan 2015-02-27 11:23:27 PST
After more testing I've realized we can't fix this issue with a third 0px.
Comment 27 User image Timothy Nikkel (:tnikkel) 2015-02-27 17:12:43 PST
This bug is about select dropdowns. Not about flash content.
Comment 28 User image Fabian Lauer 2015-12-11 05:23:15 PST
This still seems to be an issue in both FF 42.0 and 44.0a2 (Developer Edition) on Windows 10.
May I ask whether there has been any progress since this bug reappeared earlier this year?
Thanks for your effort.
Comment 29 User image Timothy Nikkel (:tnikkel) 2015-12-11 09:28:26 PST
If this bug has reappeared then please file a new bug (it is very confusing to track different occurrences of the problem in one bug). Please cc me, include a test case, and mention your OS and any thing else you feel is important to the bug. Thanks.
Comment 30 User image Denford 2015-12-14 18:57:09 PST
definitely still not fixed yet,  i can still see the problem on this fiddle http://jsfiddle.net/robreact/7YQ7E/2/ and on my site where i am implementing. any workarounds.
Comment 31 User image Timothy Nikkel (:tnikkel) 2015-12-14 22:00:11 PST
Please file a new bug instead of commenting here and cc me please. Thanks.
Comment 32 User image Timothy Nikkel (:tnikkel) 2015-12-14 22:02:07 PST
(In reply to Denford from comment #30)
> definitely still not fixed yet,  i can still see the problem on this fiddle
> http://jsfiddle.net/robreact/7YQ7E/2/ and on my site where i am
> implementing. any workarounds.

That fiddle has scale transforms. This bug is only about transforms that are translates only.
Comment 33 User image Denford 2015-12-15 15:07:46 PST
(In reply to Timothy Nikkel (:tn) from comment #32)
> (In reply to Denford from comment #30)
> > definitely still not fixed yet,  i can still see the problem on this fiddle
> > http://jsfiddle.net/robreact/7YQ7E/2/ and on my site where i am
> > implementing. any workarounds.
> 
> That fiddle has scale transforms. This bug is only about transforms that are
> translates only.

i have created a new bug see https://bugzilla.mozilla.org/show_bug.cgi?id=1232824, just was trying to avoid creating duplicates since there is a comment above saying the problem is the same and also there is a few duplicates of the same problem.

Note You need to log in before you can comment on or make changes to this bug.