Bug 36951 - -webkit-transform:rotateX on images causes mouse focus not to work properly
Summary: -webkit-transform:rotateX on images causes mouse focus not to work properly
Status: RESOLVED INVALID
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: Mac OS X 10.6
: P2 Normal
Assignee: Nobody
URL: http://jeutarot.macricow.com/bug.php
Keywords:
Depends on:
Blocks:
 
Reported: 2010-04-01 05:03 PDT by MacRicow
Modified: 2010-04-26 09:51 PDT (History)
1 user (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description MacRicow 2010-04-01 05:03:17 PDT
On images which are transformed with -webkit-transform, the focus doesn't behave properly.

You can check it on the joined URL and understand why it does behave like this. On this page, you can test mouseover on images transformed with rotateX,rotateY and rotateZ thanks to the select form at the top of the page.

Example 1. shows images with no transform : you can mouseover the images
Example 2. shows images with a simple rotate transformation (transform-origin at 50% 50% by default) : you can mouseover the image on half of it.
Example 3. shows the same as Ex 2 but with a transform origin set to 0px 0px : the part of the image which is not focusable depends on the transform-origin.
Example 4. shows both images with and without transform on the same plane

In fact, the part of the image which is considered to be under the base plan is not clickable, «mouseoverable», nor focusable. There is absolutely no issue with rotateZ since this rotation is a on a 2D plane. Both rotateX and rotateY have an issue though.

This behavior is always reproducible on the latest nightly build as well as on the latest Macintosh Safari release (4.0.5).

Note that it is NOT on the latest Chrome Macintosh release (5.0.342.7).

The way Webkit and Safari manage the transformation can't be considered as wrong compared to Chrome's way, but we should be able to focus any part of an image when there is nothing in front of it.
Comment 1 Simon Fraser (smfr) 2010-04-26 09:51:45 PDT
This is expected behavior, due to element intersection. You should avoid elements that intersect in 3d, because the rendering and hit testing behavior is not well defined.