888701 - m.cinecolombia.com/movil doesn't display mobile site in Gaia browser

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[efrat]

User Agent: Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.116 Safari/537.36

Steps to reproduce:

Browsed to "http://m.cinecolombia.com/movil/" from Gaia browser

Tested on device: 
Model: ZTE Open
OS version: 1.0.1.0-prerelease
Firmware: V1.01.00.01.019.111
Platform:18.0
Build identifier:20130522003459


Actual results:

The site uploads as a desktop site and not mobile adjusted



Expected results:

The web page should have been displayed correctly for mobile 
Displays correctly as a mobile site on Firefox for Android and Chrome for Android

Comment 1

[Karl Dubost💡 :karlcow]

The site has a CSS glitch on Firefox OS, but it is not the site for the desktop. It seems there is an issue with CSS.

Tarjeta Cineco is outside on the Firefox OS version. I wonder if it's a mediaquerie issue or a bug in Firefox OS. To investigate and analyze.

Comment 2

[Mike Taylor [:miketaylr]]

I think this is actually a parser error since you can get the same result in Chrome if you spoof as B2G.

It looks like //*[@id="page"]/tbody/tr[1]/td[2] should be a child of //*[@id="block-menu-menu-menu-principal-movil"]/div/div/ul/table/tbody/tr[1] (forgive the xpath). Since it isn't, it's not a child of .header_bottom and doesn't get the styles it needs (like Karl said),

.header_bottom table tr td {  background: url(../images/bg_menu.png) repeat-x; margin:0px; padding:0px;}

in movil_cc.css. If you spoof as Fennec, that menu item is the last in the <ul class="menu"> and all is well.

You'll notice that the layout of the films is left-aligned in the broken site B2G is served, and centered in Fennec.

I think the easiest fix would be for them to serve B2G the same site as Fennec, instead of the broken lofi version. Or they can fix the markup and layout of the images if they prefer.

Comment 3

[Karl Dubost💡 :karlcow]

There is a form available at http://m.cinecolombia.com/contactenos

Comment 4

[Adam Stevenson [:adamopenweb]]

The website form wants information about which theater you visited, trying twitter first (https://twitter.com/AdamOpenWeb/status/426777872397660161).

Comment 5

[Adam Stevenson [:adamopenweb]]

No response on Twitter. Tried using website form but it wasn't cooperating.

Comment 6

[Adam Stevenson [:adamopenweb]]

Site was made by http://icck.net

Reaching out to Project engineer on twitter: https://twitter.com/AdamOpenWeb/status/435943666352287745

Comment 7

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

Our tests think this is fixed. Looks fine to me - Adam, since you saw the problem perhaps you can check and close it?

Comment 8

[Adam Stevenson [:adamopenweb]]

Attachment: Bug 888701.png

Comment 9

[Adam Stevenson [:adamopenweb]]

Still seeing the CSS issue on FFOS simulator and on 1.2 device. Also cannot click on links to movies for more information. On Firefox Android it works well.

Comment 10

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

The backend sends some headers to identify the version it sends. Firefox OS gets:

X-UA-Device: mobile-generic

while Safari on the iPhone gets
X-UA-Device: mobile-iphone

Per the CSS/JS file paths, the mobile-generic version is targeted at Blackberry

<script src="/sites/all/themes/blackberry/js/movil.js?n3xs90"></script> vs <script src="/sites/all/themes/movil/js/movil.js?n3xs90"></script>

The markup and CSS has several differences. In the working (iPhone) version, the DIVs for image, title and the "ver mas" (view more) button are stacked underneath each other - in the broken version, they are styled to be on top of each other and the DIV with highest Z-index is actually not clickable. This is why clicking the links do not work.

Fixed the test.

Comment 11

[Adam Stevenson [:adamopenweb]]

Sent a follow up tweet with a link to your analysis Hallvord, thanks! :)

https://twitter.com/AdamOpenWeb/status/456153439701966848

Comment 12

[Karl Dubost💡 :karlcow]

This is fixed. Thanks Adam.