'perspective' and rotatey() can make text disappear

NEW
Unassigned

Status

()

Firefox
General
6 years ago
6 years ago

People

(Reporter: Andrew Wooster, Unassigned)

Tracking

10 Branch
x86
Mac OS X
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(4 attachments)

(Reporter)

Description

6 years ago
Created attachment 571192 [details]
firefox_reduced.html

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:10.0a1) Gecko/20111101 Firefox/10.0a1
Build ID: 20111101031108

Steps to reproduce:

See attached test case.


Actual results:

Block elements transformed with a 3d transform within a block element which has overflow set to "hidden" are not transformed properly.


Expected results:

Both block elements should be rotated around the Y axis by 40 degrees.
(Reporter)

Comment 1

6 years ago
Created attachment 571194 [details]
Rendering of test case in Firefox Nightly 10.0a1
(Reporter)

Comment 2

6 years ago
Created attachment 571195 [details]
Rendering of test case in Safari
(Reporter)

Comment 3

6 years ago
Additionally, the text doesn't render properly in the 3d transformed block element.
Both squares are transformed for me in a recent nightly.  Can you confirm that's true?

However, the text doesn't render here:

data:text/html,<!doctype html>
<div style="width:100px; -moz-perspective:317px">
<div style="-moz-transform: rotatey(20deg)">
This text is invisible?

Changing 20deg to 19.998deg makes the text visible.  Changing the perspective to 317.03px also makes it visible.  Changing the angle to -20deg or any other negative number makes the text visible, and so does any angle I tried with rotatex() instead of rotatey().
Blocks: 505115
Status: UNCONFIRMED → NEW
Ever confirmed: true
Summary: overflow:hidden affects rendering of 3d transforms → 'perspective' and rotatey() can make text disappear
(In reply to Aryeh Gregor from comment #4)
> However, the text doesn't render here:
> 
> data:text/html,<!doctype html>
> <div style="width:100px; -moz-perspective:317px">
> <div style="-moz-transform: rotatey(20deg)">
> This text is invisible?

Is this maybe because the rotation puts some of the text at a z-position greater than the perspective?  If so, this is bug 726766.
(Reporter)

Comment 6

6 years ago
Created attachment 629316 [details]
Rendering of test case in Firefox Nightly 15.0a1
(Reporter)

Comment 7

6 years ago
(In reply to Aryeh Gregor from comment #4)
> Both squares are transformed for me in a recent nightly.  Can you confirm
> that's true?

I'm seeing slightly different, but still incorrect rendering behavior on 15.a1 (2012-06-01). Rendering of the test case attached.

> However, the text doesn't render here:

I don't see the relationship between this bug and 726766.
You're right, it's not related.  The perspective in your original test-case is large enough that even if the rotation were 90deg, nothing should have a z-component larger than the perspective.  Same for my reduced test-case in comment 4.  My bad.
You need to log in before you can comment on or make changes to this bug.