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

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[Chris Peterson [:cpeterson]]

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

Comment 1

[Chris Peterson [:cpeterson]]

mstange: could this bug be a regression from your fix for layer bug 1050471?

roc, dholbert: you guys also landed layout changes in the regression pushlog (in comment 0).

Comment 2

[Markus Stange [:mstange]]

Unlikely. And I see both "flex" and "auto" in the site's stylesheet, so I'll pass this along to dholbert.

Comment 3

[Daniel Holbert [:dholbert]]

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.

Comment 4

[Daniel Holbert [:dholbert]]

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

Comment 5

[Daniel Holbert [:dholbert]]

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.

Comment 6

[Daniel Holbert [:dholbert]]

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.

Comment 7

[Daniel Holbert [:dholbert]]

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

Comment 8

[Daniel Holbert [:dholbert]]

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.

Comment 9

[Daniel Holbert [:dholbert]]

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

Comment 10

[Daniel Holbert [:dholbert]]

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

Comment 11

[Daniel Holbert [:dholbert]]

Sounds like a fix is coming soon: https://twitter.com/foleyatwork/status/509774593125777408

Comment 12

[Daniel Holbert [:dholbert]]

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.