ameblo.jp - layout is messed up

[karlcow]

URL: http://ameblo.jp/
Browser / Version: Firefox 39.0
Operating System: Android
Problem type: Layout is messed up

Steps to Reproduce

1. Navigate to: http://ameblo.jp/
2. Go down a bit in the page

Expected Behavior:
Having boxes aligned horizontally.

Actual Behavior:
The boxes are aligned vertically. This is the sign of flexbox issues with old webkit css.
There might be issues with links too.

Example.

.w130507 #game_area .service_item {
    font-size: 1.4rem;
    display: block;
    width: 33%;
    margin: 7px 7px 5px 0;
    color: #666;
    -webkit-box-flex: 1;
    box-flex: 1
}

Easy fix with http://hallvord.com/temp/moz/cssfixme.php

country: jp

[karlcow]

Firefox Aurora Screen 1

Firefox Unprefixed Screen 1

Firefox Aurora Screen 2

Firefox Unprefixed Screen 2

[miketaylr]

There's also a (subtle) bug in the CSS in the interaction of the h1.section_h1 and its pseudo-element icon:

On 4/22/15 14:33, Daniel Holbert wrote:
> On 04/22/2015 02:20 PM, Hallvord Reiar Michaelsen Steen wrote:
> > Chrome moves the icon (pseudo) and text as one unit when I tweak the
> > styling. It can easily be tested on desktop by using Chrome, emulating
> > some phone from devtools, loading ameblo.jp <http://ameblo.jp>, finding
> > <h1 class="section_h1"> and tweaking its -webkit-box-pack value.

[snip] This is essentially a difference in how
content is grouped into flex items, between CSS3 flexbox & -webkit-box.

(Chrome *does* match Firefox if you force "display:flex !important;
justify-content:space-between" on the h1 in question, BTW -- so we're
agreed on how this should behave in CSS3 flexbox. It's just that
-webkit-box does things differently.)

If they update their site to modern unprefixed Flexbox, this goes away.

[dholbert]

@miketaylr, thanks -- two corrections on your points there:
(1) It's actually not the pseudo-element that's the issue -- it's the <i>. Any element (including this <i>) inside of a CSS3 flex container will get promoted to be its own flex item (required by the spec), and that's why the <i> here is getting aligned differently from the rest of the text.
(2) If the website naively/directly updates to modern unprefixed flexbox, the issue doesn't actually go away -- it will just start affecting all browsers that support CSS3 flexbox. (instead of just affecting Firefox-with-cssfixme/unprefixingservice)

To avoid triggering this problem, they should update to modern unprefixed flexbox, and do one of the following:

• Drop "box-pack" (or its modern equivalent "justify-content") from this <h1>, since (at least in this case) they don't actually want it to take effect.
  ...or:
• Wrap the <h1>'s contents in a wrapper-div, to explicitly delineate what they want to be included in a flex item. (That way, the <div> will be the flex item, and <i> won't get promoted off to be its own flex item and justified away from the rest of the text.)

[karlcow]

Note for contacting ameba: Adding that changing the CSS is also the best shot for Ameba because the new CSS flexbox syntax is supported everywhere across browsers and it will be more resistant to time than the WebKit version which might be deprecated at a point.

[kudodo]

Mozilla Japan has a contact. Tomoya or other guy will contact them.

[chikoski]

@karlcow

I am trying to apply the solution you mentioned.And I can not fix it...This is a preparation before contact Ameba guys. So, would you give me some explanation what should I do.

The code I added is:

.w130507 #game_area .service_item{
    font-size: 1.4rem;
    display: block;
    width: 33%;
    margin: 7px 7px 5px 0;
    color: #666;
    -webkit-box-flex: 1;
    box-flex: 1;
    flex: 1 auto;
}

[dholbert]

@chikoski It looks like you just added "flex: 1 auto", I think? That won't have any effect unless the parent also has "display:flex".

As noted in my comment above, I think we'd like them to:
(1) Add modern equivalents of all their flex-related properties (particularly e.g. "display:flex" after display:-webkit-box, and "flex: 1" after "-webkit-box-flex:1")
(2) Add a new <div> inside each <h1 class="section_h1"> (with the new div wrapping the <i> and the text after the <i>), to prevent the <i> child there from being split into its own flex item, separate from the rest of the text.

[dholbert]

(For part (1): http://hallvord.com/temp/moz/cssfixme.php can probably suggest the correct modern equivalents in most or all cases, BTW.)

[chikoski]

@dholbert
Thanks. I misunderstood the usage of cssfixme.php. I gave it only the rule which I mentioned in previous comment. We need to give it all css file.

Now, it is clear to me. I will send a report to ameba.
Thanks again

[chikoski]

I have sent a report to CyberAgent and asked to introduce me the appropriate contact person.

[karlcow]

Oh they changed the site?

The normal version of Firefox is redirected to s.ameblo.jp and then the site is working well.

@chikoski is a hero! 💯