1009150 - Broken page layout on m.clippercard.com

Status: RESOLVED FIXED

(Web Compatibility :: Mobile, defect)

Description

[Brian Nicholson (:bnicholson)]

Attachment: clipper.png

See attached screenshot.

Comment 1

[Brian Nicholson (:bnicholson)]

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.

Comment 2

[Kartikaya Gupta (email:[e-mail])]

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.

Comment 3

[Karl Dubost💡 :karlcow]

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?

Comment 4

[Karl Dubost💡 :karlcow]

Attachment: transform-perspective.png

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

Comment 5

[Karl Dubost💡 :karlcow]

so this one is NOT fixed by layout.css.prefixes.webkit;true

Comment 6

[Mike Taylor [:miketaylr]]

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).

Comment 7

[Mike Taylor [:miketaylr]]

(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?

Comment 8

[Karl Dubost💡 :karlcow]

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.

Comment 9

[Xidorn Quan [:xidorn] UTC+11]

Sent an email to CSSWG around this issue: https://lists.w3.org/Archives/Public/www-style/2016Apr/0028.html

Comment 10

[Karl Dubost💡 :karlcow]

> © 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@…

Comment 11

[Karl Dubost💡 :karlcow]

Thanks Xidorn.

Comment 12

[Mike Taylor [:miketaylr]]

thanks karl and xidorn!

Comment 13

[Karl Dubost💡 :karlcow]

> 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.

Comment 14

[Mike Taylor [:miketaylr]]

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

Comment 15

[Xidorn Quan [:xidorn] UTC+11]

Filed bug 1274158.

Comment 16

[Mike Taylor [:miketaylr]]

Thanks!

Comment 17

[Karl Dubost💡 :karlcow]

Trying another way http://twitter.com/MozWebCompat/status/758211952124452864

Comment 18

[Xidorn Quan [:xidorn] UTC+11]

Bug 1274158 is fixed now, probably we can close this bug as well?

Comment 19

[Mike Taylor [:miketaylr]]

Yep, confirmed FIXED on nightly. Thanks Xidorn!