Closed
Bug 1109236
Opened 10 years ago
Closed 10 years ago
CSS preserve-3d with opacity < 1 results in hidden element
Categories
(Core :: Layout, defect)
Tracking
()
RESOLVED
DUPLICATE
of bug 1098266
| Tracking | Status | |
|---|---|---|
| firefox34 | --- | affected |
| firefox37 | --- | unaffected |
People
(Reporter: mdbiscan, Unassigned)
Details
Attachments
(2 files)
Screen Shot 2014-12-09 at 1.25.13 PM.png
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36
Steps to reproduce:
CSS properties used together on an element:
transform-style: preserver-3d
opacity: 0.3
Actual results:
Element is not visible. Removing transform-style will remove the error, but that is not optimal.
Expected results:
The transform property should not hinder opacity.
I noticed there was a previous bug reported very similar to this, but not as specific. It was marked as invalid.
|
||
Comment 2•10 years ago
|
||
Can you create a reduced testcase for this? Or save the page to a local set of files in a way that still reproduces the bug?
I dug into this a bit further. I opened a clean HTML document and started playing around with elements until I could replicate it. Seems like it's a little more detailed.
This combination of declarations produced a hidden element:
transform-style: preserve-3d;
opacity: 0.4;
backface-visibility: hidden;
box-shadow: 2px 2px 2px rgba(50, 50, 50, 0.33);
Removing any of those will bring the visibility back. Very weird edge-case!
|
|
||
Comment 4•10 years ago
|
||
Can you attach your HTML document to this bug, please? It would be very helpful.
Sure. It's just simple HTML.
<!DOCTYPE html>
<html lang="en">
<header></head>
<body>
</html>
Disregard the post above. Hit a button and it posted.
Sure. It's just simple HTML.
<!DOCTYPE html>
<html lang="en">
<header>
<style>
.test {
transform-style: preserve-3d;
opacity: 0.4;
backface-visibility: hidden;
box-shadow: 2px 2px 2px rgba(50, 50, 50, 0.33);
}
</style>
</head>
<body>
<div class="test">TEST</div>
</body>
</html>
I posted the style in the <head> for this example, but I did my testing in the CSS debugger.
|
|
||
Comment 8•10 years ago
|
||
Thanks, this was simpler than expected. So the bug is present on 34 but not on Nightly. We need to find a fix range and possibly uplift the patch that fixed it.
|
|
||
Updated•10 years ago
|
Status: UNCONFIRMED → NEW
Ever confirmed: true
|
|
||
Updated•10 years ago
|
status-firefox34:
--- → affected
status-firefox37:
--- → unaffected
|
|
||
Updated•10 years ago
|
Component: Untriaged → Layout
Product: Firefox → Core
|
|
||
Comment 9•10 years ago
|
||
This was fixed by bug 1098266, which has been uplifted to 35 and is wontfix on 34.
Status: NEW → RESOLVED
Closed: 10 years ago
Resolution: --- → DUPLICATE
|
Reporter | |
Comment 10•10 years ago
|
||
Great! I looked for a dupe, but couldn't find anything this specific. Glad it was fixed.
You need to log in
before you can comment on or make changes to this bug.
Description
•