1291826 - CSS 3D transform links are not clickable

Status: RESOLVED INVALID

(Core :: Layout, defect)

Description

[Tobi]

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

Steps to reproduce:

Try to klick the pictures in the back of http://motorradreisen-suedamerika.de/3draum.html


Actual results:

Cant klick on the pictures in the back. 


Expected results:

Links in the back should be klickable as in Google Chrome.

Comment 1

[Alice0775 White]

[Tracking Requested - why for this release]: Regression since 47

Comment 2

[Alice0775 White]

Regression window:
https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=6c49bb716593014c07d3736ea2124f74bfe3bb06&tochange=691f2e687e46d1b166b88b0a3f9dbd480bff9afa

Via local build,
Last Good: f40c0da4e4ce +691f2e687e46
First Bad: f950b7a04741 +691f2e687e46

Regressed by: f950b7a04741	Thinker K.F. Li — Bug 1226904 - Fix boundary checking for leaves collecting. r=roc

Comment 3

[Alice0775 White]

[Tracking Requested - why for this release]: Regression since Firefox46

Comment 4

[Alice0775 White]

Edge and Firefox does not work.
Chrome works.

Comment 5

[Alice0775 White]

(In reply to Alice0775 White from comment #4)
> Edge and Firefox does not work.
> Chrome works.

So, I marked this 'unconfirmed'.

Comment 6

[Tobi]

Well the linksare clickable but there seems to be a transparent "wall" above them even the divs with the objects in front are very small

Comment 7

[Tobi]

Safari workes too

Comment 8

[Tobi]

if you turn the room using the arrow keys the links in the back can be klickt even they are transformed

Comment 9

[Alice0775 White]

Attachment: reduced html

Comment 10

[Tobi]

Yes thats it

Comment 11

[Sylvestre Ledru [:Sylvestre]]

Doesn't seem to be a big deal in 48

Comment 12

[Tobi]

Shure its a big deal. Did you try the examples? Not working in FF 48 while working in all the other browsers!

Comment 13

[Sylvestre Ledru [:Sylvestre]]

Doesn't work with edge, 47 shipped a few months ago with this issue and it was only reported now. I understand your frustration but this doesn't qualify as a ride along for 48.0.1.

However, someone finds a fix in time to 49, we could take it

Comment 14

[Thinker Li [:sinker]]

After look into the reduce html, I think it is a problem.  The parent of the links has a transparent background layer.  When the background lays above a link, it would intercept mouse events even it is invisible for as transparent.  The correct implementation, for the case here, is to use translateZ() to put all ancestors to the back.

By the way, Edge shares the same behavior with the current implementation of gecko.

Comment 15

[Tobi]

Thanks not shure what you mean. Do you have a working example with translateZ()?

Comment 16

[Thinker Li [:sinker]]

The correct implementation of reduce html is to change style of |.cube| by removing the |transform-style| line.

Comment 17

[Thinker Li [:sinker]]

Attachment: clickable.html

This page move perspective to |.umcube| and adjust |translateZ()| at |.cube| and |.right|.

Comment 18

[Tobi]

Wow your great :-) Without this transform line the keyframes only work in Chrom but i can life with that ;)

Comment 19

[Tobi]

@keyframes move-origin {
  0%    { perspective-origin: 50% 50%; }
  25%   { perspective-origin: 65% 50%; }
  50%   { perspective-origin: 50% 50%; }
  75%   { perspective-origin: 35% 50%; }
  100%  { perspective-origin: 50% 50%; }
}


and in Chrome when turning the coom using "D" or "A" without the transform instruction the walls decapear faster then in ff but thanks a lot :-)

Comment 20

[Tobi]

ok chrome and opera take -webkit- too so they get their transform-style to move the origin and ff not. FF needs it too to be able to move the origin but klickable links are more importend for now.

Comment 21

[Tobi]

> This page move perspective to |.umcube| and adjust |translateZ()| at |.cube|
> and |.right|.

So transparent |.cube| wsablocking the links. You push it to the back and pull the others to the front then it works. Second solution: make |.cube| visibility:hidden; This is not a bug. Thanks for all your help :-)