991086 - dhakatimes.com.bd sends desktop site to Firefox OS

Status: RESOLVED WONTFIX

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

Description

[Mashkawat Ahsan]

Firefox Android redirected to http://m.dhakatimes.com.bd/, Firefox OS not redirected

Selected HTTP response headers:

Response for: 'Mozilla/5.0 (Mobile; rv:18.1) Gecko/18.1 Firefox/18.1'
Response Status: 200
content-length: 0
content-type: text/html

Response for: 'Mozilla/5.0 (Android; Mobile; rv:26.0) Gecko/26.0 Firefox/26.0'
Response Status: 302
content-length: 0
location: http://m.dhakatimes.com.bd/
content-type: text/html

Comment 1

[Karl Dubost💡 :karlcow]

This requires a bit more analysis.
Once we specifically request the mobile site on Firefox OS, the site is displayed without issues, but can't be scrolled. We can scroll on iPod Touch Safari.

On Firefox on Android at the first load, we can scroll, but the links on articles are not working, including menu (top left icon).

On Opera blink mobile, everything is working as expected. I suspect that the JavaScript Framework has been designed with chrome in mind.

Comment 2

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

in http://m.dhakatimes.com.bd/css/A.style.css,qvar=1406396963.pagespeed.cf.iquI63PAz4.css :

html,body{
	font-family:'Roboto',sans-serif;
	margin:0;
	padding:0;
	width:100%;
	height:100%;
	overflow:hidden;
	-webkit-font-smoothing:antialiased
}

Styling the HTML and BODY elements with overflow:hidden isn't really scrolling-friendly. Does this "work" in other browsers??

Comment 3

[Karl Dubost💡 :karlcow]

Hallvord, what about user agent sniffing that would cancel the "overflow: hidden" through JavaScript or just bad JavaScript supposed to cancel the effects of the overflow.

Comment 4

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

There's an element styled with overflow:auto inside:

.snap-content {
position: absolute;
top: 0;
right: 0;
/* bottom: 0; */
left: 0;
width: auto;
height: auto;
z-index: 2;
overflow: auto;
-webkit-overflow-scrolling: touch;
-webkit-transform: translate3d(0, 0, 0);

There's also apparently some JS to move this positioned element out of the way and show the site menu if you "swipe" in from left. However, the bug reproduces with very simple markup/CSS, no JS in sight:
http://hallvord.com/temp/moz/bug/991086.htm

Comment 5

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

Attachment: Test for scroll issue - content is scrollable in Firefox on Android, not in Firefox OS

Comment 6

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

Kats: there's a strange issue lurking here, this simple test case is scrollable in Firefox on Android but *not* in Firefox OS..?!?

Comment 7

[Kartikaya Gupta (email:[e-mail])]

Sounds like bug 886969. We have a known issue in Fennec where setting overflow:hidden on the body doesn't disable scrolling. That accounts for the difference in behaviour between Fennec and B2G.

However I must admit I'm not 100% sure what the specified and actual expected behaviour here is, because it depends on the overflow CSS property on both html and body, and also on whether or not the document is in standards mode or quirks mode.

Comment 8

[Botond Ballo [:botond]]

FWIW, the page is not scrollable on desktop, either.

Comment 9

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

Thanks Kats, that was fast. Sounds correct.

Botond: what I see on desktop is that the m.dhakatimes site as well as the test case is not scrollable by mousewheel, has no scrollbars, but can be scrolled if you use arrow keys. Is that what you see too?

I'm also confused regarding what behaviour is correct - I'm especially confused by the height:auto styling on that absolutely positioned DIV. So that makes the DIV as tall as its contents, so it should not (and does not) show any scrollbar - its parent is the BODY element which has overflow:hidden. So it seems the right behaviour would be to disallow scrolling..? Maybe dbaron can comment..

Comment 10

[Botond Ballo [:botond]]

(In reply to Hallvord R. M. Steen from comment #9)
> Botond: what I see on desktop is that the m.dhakatimes site as well as the
> test case is not scrollable by mousewheel, has no scrollbars, but can be
> scrolled if you use arrow keys. Is that what you see too?

That's what I see too. I didn't think to try scrolling with the arrow keys - in fact, it didn't even occur to me that there could be a difference between scrollability with mouse wheel and arrow keys. Interesting.

Comment 11

[Kartikaya Gupta (email:[e-mail])]

The arrow keys thing is bug 295020 :)

Comment 12

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

(In reply to Hallvord R. M. Steen from comment #9)
> I'm also confused regarding what behaviour is correct - I'm especially
> confused by the height:auto styling on that absolutely positioned DIV. So
> that makes the DIV as tall as its contents, so it should not (and does not)
> show any scrollbar - its parent is the BODY element which has
> overflow:hidden. So it seems the right behaviour would be to disallow
> scrolling..? Maybe dbaron can comment..

'height:auto' on absolutely positioned elements isn't purely "as tall as its contents".  It's described in http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height , which essentially sums up as using the content height *unless* both 'top' and 'bottom' are not 'auto', in which case it instead uses the space between 'top' and 'bottom'.

Also note that:

 (1) the 'overflow' property applies to the containing block tree rather than the element tree, so an absolutely positioned element is only affected by overflow on its containing block, it's containing block's containing block, etc.  Containing block is defined in http://www.w3.org/TR/CSS21/visudet.html#containing-block-details

 (2) the 'overflow' from body and html can be propagated to the viewport as described in http://www.w3.org/TR/CSS21/visufx.html#propdef-overflow


In general, I think the correct behavior for 'overflow: hidden' is to allow programmatic scrolling via DOM APIs, but not to allow user scrolling.

Comment 13

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

scrolling still an issue

As far as I can tell, the site's CSS should change. So we should contact them about both the overflow CSS and the sniffing.

Comment 14

[Sylvestre Ledru [:Sylvestre]]

Closing as we are not working on Firefox OS anymore.