Closed Bug 1009150 Opened 7 years ago Closed 4 years ago

Broken page layout on m.clippercard.com

Categories

(Web Compatibility :: Mobile, defect)

ARM
Android
defect
Not set
normal

Tracking

(firefox29 affected, firefox30 affected, firefox31 affected, firefox32 affected)

RESOLVED FIXED
Tracking Status
firefox29 --- affected
firefox30 --- affected
firefox31 --- affected
firefox32 --- affected

People

(Reporter: bnicholson, Assigned: karlcow)

References

()

Details

(Whiteboard: [sitewait] [webkitcss] [country-us])

Attachments

(2 files)

Attached image clipper.png
See attached screenshot.
I see the same layout problems going to https://m.clippercard.com/ on Firefox desktop. It's probably just an evangelism issue since I see loads of webkit-prefixed styles.
Summary: Rendering on m.clippercard.com is broken → Broken page layout on m.clippercard.com
Component: Graphics, Panning and Zooming → Mobile
Product: Firefox for Android → Tech Evangelism
Specifically they have this in their CSS:

transform:perspective(0) translate(-260px, 0);

And we don't recognize this as a valid transform value. The perspective(0) part causes the CSS property to get ignored and so the translate is thrown out as well.
Hardware: All → ARM
Whiteboard: [notcontactready] [webkitcss] [country-us]
Hmmm that looks like a bug of Gecko.
http://dev.w3.org/csswg/css-transforms/#transform-property

transform may have multiple list of values. 

Though I could not find the appropriate bug for it
https://bugzilla.mozilla.org/buglist.cgi?quicksearch=transform%20perspective&list_id=12312590

Or did I miss something?
oh more subtle indeed.

This would work
	transform:perspective(1px) translate(-260px, 0);

But not these
	transform:perspective(0px) translate(-260px, 0);
	transform:perspective(0) translate(-260px, 0);

And indeed the spec says:

> The value for depth must be greater than zero, otherwise the function is invalid. http://dev.w3.org/csswg/css-transforms/#funcdef-perspective

Good luck with that and WebKit implementing it.
made a test case
http://codepen.io/anon/pen/ZGKmLQ?editors=110
so this one is NOT fixed by layout.css.prefixes.webkit;true
Flags: needinfo?(miket)
Flags: needinfo?(miket)
I filed https://github.com/whatwg/compat/issues/48 to spec the "zero perspective transform quirk", it's probably something we need to implement. Before filing a bug on that, I want to understand why the menu is open (maybe same issue, dunno).
(OK, yep, that seems to be the main issue here, like Karl said in Comment #4)

Karl, can we try to do outreach while we get this specced and (possibly) implemented?
Flags: needinfo?(kdubost)
yup.
I (cheekily) tested with different values to see what could work
http://codepen.io/anon/pen/zqEVGg?editors=110 ^_^

I will find contacts. Switching to needscontact.
Flags: needinfo?(kdubost)
Whiteboard: [notcontactready] [webkitcss] [country-us] → [needscontact] [webkitcss] [country-us]
> © 2010- 2016, Metropolitan Transportation Commission. All rights reserved. 

They have a form for contact at 
https://www.clippercard.com/ClipperCard/contactUs.jsf

The site is made by http://mtc.ca.gov/


I explained how to fix it.

> Thank you for contacting us.
> 
> Your confirmation number is: 83551739.
> You may be contacted via your email address:  kdubost@…
Thanks Xidorn.
Assignee: nobody → kdubost
Status: NEW → ASSIGNED
Whiteboard: [needscontact] [webkitcss] [country-us] → [sitewait] [webkitcss] [country-us]
thanks karl and xidorn!
> Dear Karl,
> Thank you for contacting the Clipper Customer Service Center.
> The information has been forwarded to management.  
> Please let me know if I can assist you further.
Xidorn, is there a bug on file to move towards what you describe here? 

https://lists.w3.org/Archives/Public/www-style/2016Apr/0060.html
Flags: needinfo?(bugzilla)
See Also: → 1274158
Filed bug 1274158.
Flags: needinfo?(bugzilla)
Thanks!
Bug 1274158 is fixed now, probably we can close this bug as well?
Yep, confirmed FIXED on nightly. Thanks Xidorn!
Status: ASSIGNED → RESOLVED
Closed: 4 years ago
Resolution: --- → FIXED
Depends on: 1274158
Product: Tech Evangelism → Web Compatibility
You need to log in before you can comment on or make changes to this bug.