Layout regression on f8.facebook.com (css3-3d-transforms detection)

VERIFIED WORKSFORME

Status

Tech Evangelism Graveyard
English US
VERIFIED WORKSFORME
7 years ago
3 years ago

People

(Reporter: Ehsan, Unassigned)

Tracking

({regression})

Details

(URL)

(Reporter)

Description

7 years ago
I noticed that when scrolling, f8.facebook.com behaves really badly.  The globe on that page doesn't scroll, and jitters to try to maintain its fixed vertical position.

I bisected this, and here's the result:

The first bad revision is:
changeset:   73745:74eac3a09043
user:        Matt Woodrow <mwoodrow@mozilla.com>
date:        Wed Aug 03 15:04:20 2011 +1200
summary:     Bug 505115 - Part 8b - Add 3D Point support, and ray tracing to gfx3DMatrix. r=bjacob, sr=roc
Assignee: nobody → matt.woodrow

Comment 1

7 years ago
I think dis is site issue. 
because the problem seems to be gone if I modified https://s-static.ak.facebook.com/rsrc.php/v1/y_/r/q7O-h0eYH2K.js as follows.

 function transform3d(elem,x,y,z) {
   if (z > 500) {
     elem.setAttribute('style','display: none;');
   } else {
     if (window.has3d) {
-      //elem.setAttribute('style','-webkit-transform: translate3d('+x+'px,'+y+'px,'+z+'px);');
     } else {
       var scaleFactor = 1 + (z / 100);
       elem.setAttribute('style','-moz-transform: scale(' + scaleFactor +') translate('+x/4+'px,'+y+'px);');
     }
   }
 }
Thanks for this Ehsan and Alice!

This is a duplicate of bug 677173, because the Modenizr library is detecting the MozPerspective css property and assuming we support 3d transforms (which are still enabled by default currently).

There's still a website bug here in that they only set the -webkit-transform property, so this will still be broken once 3d transforms are enabled by default.
Sorry, *disabled by default currently.
Summary: Layout regression on f8.facebook.com → Layout regression on f8.facebook.com (css3-3d-transforms detection)
Assignee: matt.woodrow → english-us
Component: Style System (CSS) → English US
Product: Core → Tech Evangelism
QA Contact: style-system → english-us
Version: Trunk → unspecified
Morphing to Tech Evangelism for the issue that Facebook is sending us -webkit-transform when they detect we support 3D transforms.
Has someone contacted them already?
(Reporter)

Comment 6

7 years ago
Do we have a technical contact from Facebook?  I know a couple of people there but not sure if they're the right people to approach about this.
I've reported this internally (and hopefully CC'd the right account)

Comment 8

7 years ago
Thanks for Cc'ing browser-bugs@fb.com, Rob, that's indeed the right account. Feels like this is also an issue with Modernizer. Copying Faruk Ateş and Paul Irish.
Modernizr is fine (at least once we fix bug 677173, which we plan to before release), as far as I can tell.
... but note that fixing bug 677173 will defer this facebook problem from being visible until we really enable 3d transforms.

Comment 11

7 years ago
Isn't modernizer inferring support for A by testing presence of B?
It's assuming that support for the 'perspective' property from the 3D Transforms draft implies support for 3D Transforms and that therefore "has3d" should be set to true.

That's all modernizr does here; the code that assumes that "has3d" means support for "-webkit-transform: translate3d" is site code.

Comment 13

7 years ago
My bad. Thanks for clarifying.

Comment 14

7 years ago
This should be fixed, now.
(Reporter)

Comment 15

7 years ago
Well, the website has changed, and it no longer includes the effect that I saw in comment 0.
Status: NEW → RESOLVED
Last Resolved: 7 years ago
Resolution: --- → WORKSFORME

Comment 16

7 years ago
Which explains why the task was closed without an attached diff. Well, again: my bad.

Updated

7 years ago
tracking-firefox9: ? → -

Comment 17

7 years ago
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:11.0a1) Gecko/20111206 Firefox/11.0a1

https://f8.facebook.com/ has changed and the current version works fine.
Status: RESOLVED → VERIFIED
Product: Tech Evangelism → Tech Evangelism Graveyard
You need to log in before you can comment on or make changes to this bug.