Closed Bug 1057047 Opened 6 years ago Closed 6 years ago

Squarespace slideshows using the "ishimoto" template (e.g. robinandersen.com) are flashy and extremely wide, due to "flex-basis:main-size" keyword renaming

Categories

(Web Compatibility :: Desktop, defect)

defect
Not set
normal

Tracking

(firefox33 unaffected, firefox34 affected)

RESOLVED FIXED
Tracking Status
firefox33 --- unaffected
firefox34 --- affected

People

(Reporter: cpeterson, Unassigned)

References

()

Details

(Keywords: reproducible, Whiteboard: [suggested fix for site's CSS in middle of comment 7])

The photo slideshow on robinandersen.com flashes and, instead of showing left/right slideshow buttons, opens the slideshow as an extremely wide page.

This is a regression in Nightly 34 build 2014-08-09. The regression pushlog is:

https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=18f408a5984e&tochange=587758056245
Yeah, this is a "regression" from a CSS spec change (flex-basis:auto being renamed to flex-basis:main-size), similar to bug 1051511.

The "site.css" stylesheet (shown in Style Editor) has:

> .flexbox *{-webkit-flex:0 1 auto;-moz-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto}

For this to continue working as the author expects, in Firefox Nightly (and any other browser that's up-to-date with the flexbox spec editor's draft), they need to either:

 (1) add "flex:0 1 main-size" at the end
... OR, better:
 (2) replace "flex:0 1 auto" with "flex: initial", which works in Firefox both before and after this keyword was renamed (from "auto" to "main-size")

cpeterson, do you happen to know someone involved with that site? If not, I'm happy to try to reach out to them via their "contact us" page.
Component: Layout → Desktop
Depends on: 1032922
Flags: needinfo?(dholbert)
Keywords: regression
Product: Core → Tech Evangelism
Version: unspecified → Trunk
I believe the stylesheet in question is:
http://static.squarespace.com/static/sitecss/537bd2fde4b071e473981ae1/9/4fb7a14224ac99c5fee12515/537be0b8e4b0bb0d036d5b4c/786/1402785708647/site.css?

...which is a somewhat minified form of:
http://www.robinandersen.com/site.css?debug=true
...which has labels for specific original .css files that it's been created from.

This particular rule (flex:0 1 auto) is in the section labeled "/* DEBUG: BEGIN: website css */" (as opposed to e.g. the "common css" section), so hopefully that means this is specific to this website, and not a bug in CSS used by all/many squarespace websites...
At the end of this chunk of "website css" in site.css?debug=true, it says:

> /* DEBUG: *** ADDITIONAL DEBUG INFORMATION ***

> --- templateId: 4fb7a14224ac99c5fee12515
> --- templateWebsite(ownerWebsiteId): ishimoto-demo

And sure enough, http://ishimoto-demo.squarespace.com/ is affected by this same problem.
Summary: Photo slideshow on robinandersen.com flashes and is extremely wide → Photo slideshow on robinandersen.com flashes and is extremely wide (also ishimoto-demo.squarespace.com)
Yeah, ishimoto is a Squarespace "template" -- in fact, it's their 3rd featured template here:
 http://www.squarespace.com/templates/

I'm about to open a ticket using http://help.squarespace.com/open-a-ticket to report the issue to them.
Summary: Photo slideshow on robinandersen.com flashes and is extremely wide (also ishimoto-demo.squarespace.com) → Squarespace slideshows using the "ishimoto" template (e.g. robinandersen.com) are flashy and extremely wide, due to "flex-basis:main-size" keyword renaming
I just submitted the ticket, with these contents:

SUBJECT: Ishimoto template is broken on Firefox Nightly (and needs a CSS tweak), due to CSS keyword "flex-basis:auto" being renamed to "main-size"

MESSAGE:
Hi Squarespace,

I'm a developer for the Firefox web browser, and I'm contacting you to report a bug in in Squarespace's "Ishimoto" template CSS which is causing problems in Firefox Nightly[0] (which will become the Firefox release version in ~14 weeks, and will be making its way through our alpha/beta channels in the meantime).

In particular, there was a CSS spec change which I implemented a few weeks back[1] -- a keyword was renamed, and websites that use this keyword need to be updated to adapt to the change, or else they'll break in browsers that have implemented this renaming. (Currently, Firefox Nightly is the only browser that's up-to-date enough with the spec to have run into this, but I expect other browsers will run up against this soon as well.)

The specific issue is in the declaration "flex:0 1 auto" in the Ishimoto template's CSS.  The "auto" keyword there (which is for the "flex-basis" sub-property) has now been renamed to "main-size"[2], and "auto" now does something completely different than what it used to do in this context.  To preserve old behavior, you need to use "main-size" instead of "auto" there, for browsers that support "main-size".

You can either achieve this by simply adding "flex: 0 1 main-size" at the end of that CSS rule. In browsers that don't recognize it, this new line will be ignored (i.e. have no effect).  And in browsers that *do* recognize it, it'll fix the mis-rendering.

(Side note: It may be even better to just use "flex: initial", since the value you're setting here corresponds to the initial value of the flex sub-properties. (and "initial" works both before and after the rename) I'm not sure if "initial" is supported everywhere though (maybe not in IE [3]), so you may be better off sticking with the expanded form that you've got right now.)

Please feel free to contact me if you have any questions.  I'd also appreciate it if you could contact me to acknowledge receipt of this message. Also, for reference, we've got a bug open to track this issue here: https://bugzilla.mozilla.org/show_bug.cgi?id=1057047

Thanks,
Daniel Holbert
Gecko Platform Engineer
Mozilla Corporation

[0] Firefox Nightly is available at http://nightly.mozilla.org/
[1] The keyword renaming was implemented in https://bugzilla.mozilla.org/show_bug.cgi?id=1032922
[2] The keyword renaming was announced on the CSS working-group list at http://lists.w3.org/Archives/Public/www-style/2014Jul/0008.html
[3] Looks like IE might not support "initial": https://developer.mozilla.org/en-US/docs/Web/CSS/initial#Browser_compatibility
For reference, here's a user-style (for use with the "Stylish" addon):
 https://userstyles.org/styles/104575/squarespace-flexbox-workaround
...which fixes this at robinandersen.com and ishimoto-demo.squarespace.com by adding the renamed "main-size" keyword locally.
Blocks: 1057162
No longer depends on: 1032922
No word back yet, aside from the autoresponse (with Case # 1187976 for this issue).

I tweeted at their support account, in case that helps:
https://twitter.com/CodingExon/status/505034088550383618
Whiteboard: [suggested fix for site's CSS in comment 3]
Whiteboard: [suggested fix for site's CSS in comment 3] → [suggested fix for site's CSS in middle of comment 7]
(In reply to Daniel Holbert [:dholbert] from comment #9)
> I tweeted at their support account, in case that helps:
> https://twitter.com/CodingExon/status/505034088550383618

(They replied (quickly!) that the case has been sent to one of their developers, but I haven't heard anything since then.  Sounds like this is on the path to being fixed, anyway.)
Hooray, looks like they've fixed it!

The site http://ishimoto-demo.squarespace.com/ now works correctly in Nightly, and I confirmed that its site.css file uses the new "main-size" keyword, as suggested in comment 3:
> *{-webkit-flex:0 1 auto;-moz-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;flex:0 1 main-size}
http://static.squarespace.com/static/sitecss/4fb7a12ae4b093525981f4d8/160/4fb7a14224ac99c5fee12515/4fb7a14224ac99c5fee1252c/790/1408977800745/site.css

http://www.robinandersen.com/ works correctly as well. So, I'm calling this FIXED.
Status: NEW → RESOLVED
Closed: 6 years ago
Resolution: --- → FIXED
Product: Tech Evangelism → Web Compatibility
You need to log in before you can comment on or make changes to this bug.