934124 - wap.abril.com.br HTML elements not rendered properly

Status: RESOLVED INVALID

(Web Compatibility :: Site Reports, defect)

Description

[Leo Balter]

Site: http://wap.abril.com.br
HTML elements not rendered properly

:: Steps To Reproduce

1. open abril.com.br, we got redirected to the wap.abril.com.br
2. a lot of items are not rendered properly. lists without texts, overflowing elements.
3.
...

:: Expected Result

a minimum readability

:: Actual Result

not everything can be read because of html/css styling

:: Additional Information

Software Version: Firefox OS 1.1.0.1
Device Information: LG Fireweb D300. Firefox OS 1.1
Reporter's User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:28.0) Gecko/20100101 Firefox/28.0

Comment 1

[Mike Taylor [:miketaylr]]

OK... The TL;DR of what I'm about to write is their "wap" site is almost as broken on the iPhone (with a few exceptions), https://cloudup.com/cpUvYBahCOT. But there are some compat issues that would be great to get fixed by the Abril devs (especially the fact that we only get to the mobile site by spoofing the UA, see 826344.

GET / HTTP/1.1
Accept: */*
Accept-Encoding: gzip, deflate, compress
User-Agent: Mozilla/5.0 (Mobile; rv:18.1) Gecko/18.1 Firefox/18.1

1) First redirect

HTTP/1.1 301 Moved Permanently
Location: http://www.abril.com.br/
wapbypass: 1 (<-- what's this?)

Going there, there's a script:

<script type="text/javascript">
//<!--
var iphone=location.search.indexOf("origem=iphone");
var isAndroid = navigator.userAgent.toLowerCase().indexOf("android") > -1;
if (iphone < 0) {
	if((navigator.userAgent.match(/iPhone/i))||(navigator.userAgent.match(/iPod/i))) {
		location.replace("http://wap.abril.com.br");
	}
}
if (isAndroid) {
	location.replace("http://wap.abril.com.br");
}
//-->
</script>

That wouldn't normally catch FxOS, but we have a UA-override in place at https://hg.mozilla.org/mozilla-central/raw-file/tip/b2g/app/ua-update.json.in:

// bug 826344, abril.com.br
"abril.com.br": "\\(Mobile#(Android; Mobile",

OK. Once there, a few issues:

Scrolling is noticeably painful and janky on FxOS. I suspect because they're using iScroll (v4.1.9), but it could other issues. Will have to investigate that library further. But the following comment isn't confidence inspiring:

// Browser capabilities
isAndroid = (/android/gi).test(navigator.appVersion),
isIDevice = (/iphone|ipad/gi).test(navigator.appVersion),
isPlaybook = (/playbook/gi).test(navigator.appVersion),
isTouchPad = (/hp-tablet/gi).test(navigator.appVersion),

Which is later used like so, hasTransitionEnd = isIDevice || isPlaybook, (welp).

Swiping the image carousel or clicking on either side doesn't work in FxOS like it does on the iPhone, and it seems like iScroll is the culprit as well:

 

(inline script)
var scrollTV = new iScroll('wrapperTV', {
...
document.getElementById("prevTV").setAttribute("onclick", "scrollTV.scrollToPage('prev', 0)");
document.getElementById("nextTV").setAttribute("onclick", "scrollTV.scrollToPage('next', 0)");

iScroll is used in a few places for scrolling videos, apps, magazines, and the image carousel.

Some of the images are missing, because they're not on a server: <img src="http://www.abril.com.br/celular//imagem/carro-300.jpg"> (404).

As for the "Mais Lidas" box being empty... well that's because it's just empty:

https://cloudup.com/cQlGEaVMWyy

Not really our bug, the iPhone gets served the empty content too (as seen in the screenshot).

...I almost think we should not spoof as Android so we end up on the Desktop site. :|

But we need to do more analysis on iScroll to see if an updated version is better, or if we have some suggested fixes. So I would hold off on contacting them just yet.

Comment 2

[Mike Taylor [:miketaylr]]

OK, so we should recommend to them that they upgrade to iScroll 5. Also recommend that they use a more inclusive regex to detect mobile browsers to send to the wap site (which to be clear, isn't a WAP site).

Comment 3

[Karl Dubost💡 :karlcow]

On entering http://abril.com.br/
on Firefox OS, Firefox Android, iOS Safari, Chrome Android, we receive the desktop site.

They seem to have changed their strategy with a huge number of dedicated apps.
http://www.abril.com.br/apps.html


Closing as INVALID.