717516 - Layout issue on http://m.porsche.com/usa/models/cayenne/cayenne-s/

Status: RESOLVED INVALID

(Web Compatibility :: Site Reports, defect, P4)

Description

[Marcia Knous [:marcia]]

Seen while running 20120111 Aurora build. Running on Motorola Photon with Android Version 2.3.4

STR:
1. Load http://m.porsche.com/usa/models/cayenne/cayenne-s/ in Aurora.
2. Observe layout issue - Page loads as if I am zoomed in and you can see the page borders.
3. Load http://m.porsche.com/usa/models/cayenne/cayenne-s/ in stock browser. Same page lays out fine.

I can attach screenshots if necessary.

Comment 1

[Marcia Knous [:marcia]]

m.nypost.com is another site I see this on.

tchung suggested manipulating the font size, but in my case that does nothing when I reload the page.

Comment 2

[Tony Chung [:tchung]]

Attachment: screenshot

UA sniffing problem?   both the porsche and nypost site loads the same way when launching desktop firefox

Comment 3

[Marcia Knous [:marcia]]

Erin mentioned we have a tracking page for UA sniffing problems - do we know where that is located?

Comment 4

[Martijn Wargers (dead)]

This is probably a user agent detection issue. When I save the site in Firefox Desktop and open that on the stock browser on my phone, I get the same zoomed out site and I can zoom in/out, which I couldn't with the stock browser when visiting that site.

When I let Firefox Desktop identify as iPhone 3, then I get the same as stock browser on Android.

So this is definitely an Evangelism issue.

Comment 5

[Hallvord R. M. Steen [:hallvors]]

Seems to work fine in Firefox for Android now (although the page source still contains many differences - seems they rely a lot on backend sniffing). Still see the problem that the page is slightly zoomed out initially on Firefox OS. We should suggest that their backend handles Fx on Android and Fx OS the same way.

Comment 6

[Karl Dubost💡 :karlcow]

I have exactly the same rendering in Firefox for Android and Firefox OS, with a slightly wider page than the viewport. A double tap refocus the page.

Note that it is working fine in Opera Mobile (Presto) on Android. Is it working everywhere and not on Firefox OS/Android? And if it's the case, the question is why?

ok understood.

Firefox OS doesn't receive just this one line.
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

The others receive it.

Comment 7

[Karl Dubost💡 :karlcow]

The CSS is different too.

Comment 8

[Karl Dubost💡 :karlcow]

Contacted through https://my.porsche.com/usa/dialogue/contactandinformation/contactus/

Comment 9

[Karl Dubost💡 :karlcow]

Contact established

> Thank you for contacting Porsche Cars North America regarding 
> web compatibility concerns. We have forwarded your comments 
> to the appropriate parties within our organization. 
> 
> Kindest Regards,

Comment 10

[Karl Dubost💡 :karlcow]

There is definitely server side identification involved

Emulating $BROWSER UA on Firefox Desktop, there is injection of a script. Interesting thing in both cases below, the framework gets the browser version number wrong.

* Firefox OS and Firefox Android

<script type="text/javascript" id="FITML__jsonCaps">
var fitCapabilities = {
  "script_event_ontouch":"false",
  "type":"desktop",
  "os_name":"Desktop OS",
  "screen_width":"340",
  "screen_height":"340",
  "browser_width":"340",
  "browser_height":"340",
  "origin_country":"JP",
  "brand":"Unspecified",
  "model":"Desktop",
  "browser":"Mozilla Firefox",
  "browser_version":"10.0",
  "os_version":"0.0",
  "client":"browser",
  "script":"true"};
</script>


# Chrome Android

<script type="text/javascript" id="FITML__jsonCaps">
var fitCapabilities = {
    "script_event_ontouch": "false",
    "type": "mobile",
    "os_name": "Android OS",
    "screen_width": "720",
    "screen_height": "1280",
    "browser_width": "360",
    "browser_height": "519",
    "origin_country": "JP",
    "brand": "Samsung",
    "model": "Galaxy Nexus",
    "browser": "Google Chrome for Android",
    "browser_version": "0.18",
    "os_version": "4.04",
    "client": "browser",
    "script": "true"
};
</script>



The framework replaces also vendor extension for CSS. For example,

firefox:
input {
    -moz-box-sizing: border-box;
    margin-left: 0 !important;
}

webkit:
input {
    -webkit-box-sizing: border-box;
    margin-left: 0 !important;
}

OR things like

firefox:
.privacyCommitment_layer_bar {
   … 
   background: -moz-linear-gradient(top, #ffffff, #f3f3f3);
}

webkit:
.privacyCommitment_layer_bar {
    …
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(1, #f3f3f3));
}

to note that the job is done well, but will break when some of these vendor extensions are not supported anymore by the vendors. The vendor less property is not in the CSS.

firefox:
.list_div_span {
    display: inline-block;
    padding-top: ;
    padding-bottom: ;
}

webkit:
.list_div_span {
    display: inline-block;
    padding-top: 6px;
    padding-bottom: 6px;
}


I discovered also that Firefox version has

.fitMlbody {
    width: 340px!important;
    border-width: 1px;
    padding: 4px!important;
    margin-left: auto!important;
    margin-right: auto!important;
    border-style: solid;
    min-height: 480px;
}
.fitMldoc {
    padding: 10px 0 10px 0!important;
    margin: 0!important;
}


When webKit doesn't have. AND THIS IS the culprit. Remove this block and we have the same behavior than the WebKit version. :)

Comment 11

[Karl Dubost💡 :karlcow]

Another set of differences, there is a full CSS missing

firefox:
none

webkit
<style type="text/css" id="FITML__CSSTouchOptimize">


firefox:
<body onload="fitInit();fit.initSliderManager();fit.initSliders();" class="fitMldoc">
    <div class="fitMlbody">


webkit:
<body onload="fitInit();fit.initSliderManager();fit.initSliders();if(location.hash == ''){window.scrollTo(0, 1)};fit.addIdlessOnOrientationChange(&quot;jumpToGallery();&quot;);">


The rest is mostly identical.

Comment 12

[Karl Dubost💡 :karlcow]

Contacted their service today with the additional information found.

Comment 13

[Karl Dubost💡 :karlcow]

The Mobile Web site doesn't exist anymore. This issue is now INVALID.

That said there's a bug with the new responsive Web site.