s.chintai.mynavi.jp - layout is messed up

[syasue]

URL: http://s.chintai.mynavi.jp/
Browser / Version: Firefox 38.01
Operating System: Android
Problem type: Layout is messed up

Steps to Reproduce

1. Navigate to: http://s.chintai.mynavi.jp/
2. …

Expected Behavior:
Looks like it does in Chrome

Actual Behavior:
Layout broken at bottom of the page

country: jp

[karlcow]

1. Missing gradients on the top 3 buttons
2. Missing background color on the tabs (orange/green)
3. Missing gradients on the button list after the green/orange tabs
4. Missing gradients on the orange horizontal bars (headers)
5. bottom buttons bar should be 2x2 (it is currently vertically aligned)

Probably all -webkit- stuff.

For 1.

 .btn_top li {
  float: left;
  width: 30.5%;
  height: 50px;
  margin-right: 5px;
  text-align: center;
  font-size: 85%;
  border: 2px solid #7F7F7F;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background: (linear, left top, left bottom, color-stop(0%,rgb(255,255,255)), color-stop(100%,rgb(240,240,240)));
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(255,255,255)), color-stop(100%,rgb(240,240,240)));
}

Can be fixed with

background: linear-gradient(to bottom, rgb(255, 255, 255) 0%, rgb(240, 240, 240) 100%);

For 2.

ul.top_tub li.shop_off {
  margin: 5px 0 0 5px;
  height: 30px;
  background: url(../../images/sp/icon_bear_02.png) no-repeat 5px bottom,
              gradient(linear, left top, left bottom, color-stop(0%,rgb(134,170,67)), color-stop(100%,rgb(90,129,31)));
  background: url(../../images/sp/icon_bear_02.png) no-repeat 5px bottom,
              -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87AB43), color-stop(100%,#59801F));
  /*text-shadow: 1px 1px 1px #597a23,
               -1px -1px 1px #597a23;*/
  font-weight: bold;
}

background: url(../../images/sp/icon_bear_02.png) no-repeat 5px bottom, linear-gradient(to bottom, #87ab43 0%,#59801f 100%);

For 3.

.pref_area .search_new a {
  height: 50px;
  line-height: 50px;
  background: gradient(linear, left top, left bottom, color-stop(0%,rgb(255,255,255)), color-stop(100%,rgb(239,239,239)));
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(255,255,255)), color-stop(100%,rgb(239,239,239)));
  border-radius: 0px !important;
  -webkit-border-radius: 0px !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

can be fixed by
background: linear-gradient(to bottom, #ffffff 0%,#efefef 100%);

For 4.

.orange_belt_top {
  clear: both;
  min-height: 25px;
  margin: 0;
  padding: 6px 13px 4px;
  color: #FFF;
  font-size: 14px;
  text-align: center;
  /*text-shadow: 1px 1px 1px #AA5006,
               -1px -1px 1px #AA5006;*/
  font-weight: bold;
  background: gradient(linear, left top, left bottom, color-stop(0%,rgb(237,110,0)), color-stop(100%,rgb(226,87,0)));
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(237,110,0)), color-stop(100%,rgb(226,87,0)));
}

can be fixed by

background: linear-gradient(to bottom, #ed6e00 0%,#e25700 100%);

##For 5.

This one might be a bit harder. Basically the width: 50% doesn't round to the same value in Gecko and Blink.

ul.btn_read li {
  display: table;
  float: left;
  width: 50%;
  height: 50px;
  background: gradient(linear, left top, left bottom, color-stop(0%,rgb(0,165,231)), color-stop(100%,rgb(0,142,217)));
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,white), color-stop(100%,#EFEFEF));
  border-bottom: 1px solid #CCC;
}

the nesting ul doesn't have the same width. Reducing slightly the width, will fix the issue.

[miketaylr]

Confirmed that whitelisting doesn't fix all the issues here. The site will need to fix the CSS.

[chikoski]

Reported via a contact form on their site.

[chikoski]

I shared the solutions you mentioned above.

@karlcow
I suggest them specifying the elements' width with actual length (like px / em / rem ) or smaller percentage (like 48%) to fix problem #5.

Is my suggest reasonable? Do you have more elegant way to fix this problem?

[karlcow]

@chikoski

This is working

ul.btn_read {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

ul.btn_read li {
  height: 50px;
  width:calc(50% - 1px);
  background: gradient(linear, left top, left bottom, color-stop(0%,rgb(0,165,231)), color-stop(100%,rgb(0,142,217)));
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,white), color-stop(100%,#EFEFEF));
  border-bottom: 1px solid #CCC;
}
ul.btn_read li:nth-of-type(odd) {
  border-right: 1px solid #CCC;
}

Or also changing less their code.

ul.btn_read li {
  display: table;
  float: left;
  width: 50%;
  height: 50px;
  background: gradient(linear, left top, left bottom, color-stop(0%,rgb(0,165,231)), color-stop(100%,rgb(0,142,217)));
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,white), color-stop(100%,#EFEFEF));
  border-bottom: 1px solid #CCC;
}
ul.btn_read li:nth-of-type(odd) {
  width: calc(50% - 1px);
  border-right: 1px solid #CCC;
}

The calc property will make it work. :) spaces are important inside the parenthesis. ^_~

[karlcow]

To explain what is happening. They do width: 50% and another one with 49.999% to take into account their border of 1px which Blink and Gecko rounded differently.

So here with calc(50% - 1px) we give the exact computation. :)

[karlcow]

We can't fix the bottom on Gecko side. So they still need to modify this at the bottom and it will be more resilient for the future.

[karlcow]

@chikoski It would be cool if they could fix the last part at the bottom.

The solution is given at the bottom of this post
http://www.otsukare.info/2016/05/25/width-rounding-in-css

[karlcow]

They changed their code to switch from flex to table display.

This is fixed! Thanks.