Last Comment Bug 1057221 - mixi.jp Mobile version is using the old-old CSS webkit flexbox syntax
: mixi.jp Mobile version is using the old-old CSS webkit flexbox syntax
Status: RESOLVED FIXED
[country-jp] [webkitcss] [contactready]
:
Product: Tech Evangelism
Classification: Other
Component: Mobile (show other bugs)
: unspecified
: ARM Gonk (Firefox OS)
: -- normal (vote)
: ---
Assigned To: Karl Dubost :karlcow
:
:
Mentors:
http://mixi.jp/
Depends on: 957043
Blocks:
  Show dependency treegraph
 
Reported: 2014-08-21 22:19 PDT by Karl Dubost :karlcow
Modified: 2015-09-16 23:19 PDT (History)
4 users (show)
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---


Attachments
mixi-flexbox-firefox.png (84.13 KB, image/png)
2014-08-21 22:30 PDT, Karl Dubost :karlcow
no flags Details
mixi-fixed-css.tar.gz (239.71 KB, application/x-gzip)
2015-03-23 20:39 PDT, Karl Dubost :karlcow
no flags Details

Description User image Karl Dubost :karlcow 2014-08-21 22:19:51 PDT
+++ This bug was initially created as a clone of Bug #957043 +++

After fixing the UA mobile redirection, see Bug #957043

Site: http://mixi.jp/
When faking the UA to receive the mobile version of mixi. The CSS is not too bad, except for the usual issue of using the old old (deprecated) syntax of flexbox for WebKit only. You can see it in:
https://img.mixi.net/static/ssl/css/public/sp/portal.css?1405663228

For example
.listStyle01 div.img{
   display:-webkit-box;
   margin:0 auto;
   -webkit-box-align:center;
   -webkit-box-pack:center;
}


Please use the new syntax which is supported everywhere.
http://caniuse.com/#feat=flexbox
see http://css-tricks.com/using-flexbox/

You will reach out more customers and it's a very easy fix.

Also: 

* A couple of border radius, transform, background-size
* Meta viewport forbids user to rescale. Do not use
    "maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
Comment 1 User image Karl Dubost :karlcow 2014-08-21 22:30:42 PDT
Created attachment 8477224 [details]
mixi-flexbox-firefox.png

The current mixi webkit old syntax on Firefox OS.
Comment 2 User image Hallvord R. M. Steen [:hallvors] 2014-10-09 05:22:33 PDT
The CSS this bug was about seems fixed now. I see the performance leaves something to be desired - quite possibly we should report another bug on slow CSS animations on play.google.com
Comment 3 User image Hallvord R. M. Steen [:hallvors] 2014-10-09 05:23:18 PDT
Wrong bug. Ignore me. :-/
Comment 4 User image Hallvord R. M. Steen [:hallvors] 2014-10-09 05:34:38 PDT
Simply adding 

.listStyle01 li, .listStyle02 li, .listService li{
    box-sizing:border-box;
}

would sort out most of the problems on the front page. Much of the layout actually uses floats, not flexbox (although there is flexbox usage for small stuff like aligning images better, it seems).
Comment 5 User image Karl Dubost :karlcow 2015-03-23 20:39:38 PDT
Created attachment 8582178 [details]
mixi-fixed-css.tar.gz

These are the main CSS files of Mixi fixed.
I added the patch and the fixed version. So they could test locally.

These files are making the mobile version of Mixi compatible with more browsers.

→ tar zcvf mixi-fixed-css.tar.gz mixi/

a mixi
a mixi/home-stream
a mixi/login-home
a mixi/login-home/common-fixed.css
a mixi/login-home/common.css
a mixi/login-home/common.patch
a mixi/login-home/portal-fixed.css
a mixi/login-home/portal.css
a mixi/login-home/portal.patch
a mixi/home-stream/common-fixed.css
a mixi/home-stream/common.css
a mixi/home-stream/common.patch
a mixi/home-stream/emoticon_color.css
a mixi/home-stream/emoticon_palette-fixed.css
a mixi/home-stream/emoticon_palette.css
a mixi/home-stream/emoticon_palette.patch
a mixi/home-stream/home2011-fixed.css
a mixi/home-stream/home2011.css
a mixi/home-stream/home2011.patch
a mixi/home-stream/home2015.production-fixed.css
a mixi/home-stream/home2015.production.css
a mixi/home-stream/home2015.production.patch
a mixi/home-stream/popuplayer-fixed.css
a mixi/home-stream/popuplayer.css
a mixi/home-stream/popuplayer.patch
Comment 6 User image Karl Dubost :karlcow 2015-03-23 20:46:19 PDT
Follow the progress on contact with this bug on Bug 957043
Comment 7 User image kudo 2015-05-13 02:48:27 PDT
Mozilla Japan has contact, will contact them.
Also, discuss on https://bugzilla.mozilla.org/show_bug.cgi?id=957043.
Comment 8 User image Karl Dubost :karlcow 2015-05-15 03:23:45 PDT
Recontacted the person working at mixi today to get a status update. 
I proposed also to this person to open a bug on webcompat.com so it might be easier for them to follow up.
Let's see the answer.
Comment 9 User image Karl Dubost :karlcow 2015-05-18 02:19:29 PDT
Our current contact can't work on it. We are trying to find a contact higher up.
Comment 10 User image Yuki Kokubun 2015-07-09 01:17:44 PDT
Hi, I am an employee of mixi.

We are planning to release new CSS with no-prefixed properties and let FirefoxOS users see our mobile site, sometime between July and August.

Thank you for your patience.
Comment 11 User image Karl Dubost :karlcow 2015-07-13 16:47:36 PDT
Yuki, 

Thanks a lot for helping. That's very good news. 
Anything you need from us to understand and analyze the issues, tell us, we will gladly help.
Comment 12 User image Hallvord R. M. Steen [:hallvors] 2015-08-10 01:40:11 PDT
Karl, didn't Mixi fix this already? Close bug? :)
Comment 13 User image Karl Dubost :karlcow 2015-08-10 15:00:11 PDT
@Hallvord, Mixi (through Yuki Kobubun above) said they will fix it during this summer.
I need to check the status. ^_^
Comment 14 User image Yuki Kokubun 2015-08-11 18:55:45 PDT
We're still working on the issue.
We have removed -webkit- prefixes from 50% of our core css.

Remaining tasks:

1. Fix the remaining css.
2. FirefoxOS users will be able to see our mobile-friendly pages in September (it is one month behind the first schedule).
Comment 15 User image Karl Dubost :karlcow 2015-08-11 21:28:48 PDT
Thanks a lot for the status Yuki.
If you need any help, running into any issues, tell us.
Comment 16 User image Karl Dubost :karlcow 2015-09-16 23:19:11 PDT
This is fixed. \o/
Thanks to Mixi team and their hard work.

With a lot of love from Mozilla.

Note You need to log in before you can comment on or make changes to this bug.