www.elitemodellook.com - site is not usable

[webcompat-bot]

URL: https://www.elitemodellook.com/in/en/participate/index.htm

Browser / Version: Firefox Mobile 63.0
Operating System: Android 6.0.1
Tested Another Browser: Yes

Problem type: Site is not usable
Description: scrolling was not working
Steps to Reproduce:

From webcompat.com with ❤️

[softvision-oana-arbuzov]

Thanks for the report, I was able to reproduce the issue both with manual scroll and wheel scroll.
Not reproducible on Chrome.

Console:

SyntaxError: unexpected token: string literal[Learn More] index.htm:215:29
ui ready casting-min.js:604:41
{"form":"signup","facebookId":"","container":"site","lang":"in","step":"","tab":"","operatorId":"","imageType":0,"imageName":0,"store":"","modelId":"","intAccess":"true"} casting-min.js:604:41
request -> {"form":"signup","facebookId":"","container":"site","lang":"in","step":"","tab":"","operatorId":"","imageType":0,"imageName":0,"store":"","modelId":"","intAccess":"true"} casting-min.js:604:41
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help http://xhr.spec.whatwg.org/ casting-min.js:164:855
response in 2035 millis -> {"form":"signup","facebookId":"","container":"site","lang":"in","step":"","tab":"","operatorId":"","imageType":0,"imageName":0,"store":"","modelId":"","intAccess":"true"} casting-min.js:604:41 

Tested with:
Browser / Version: Firefox Nightly 63.0a1 (2018-08-19)
Operating System: Google Pixel (Android 9) - 1080 x 1920 pixels (~441 ppi pixel density), Samsung Galaxy S7 Edge (Android 8.0.0) - Resolution 1440 x 2560 pixels (~534 ppi pixel density)

Moving to Needsdiagnosis for further investigation.

[karlcow]

This is probably a good starter.

html, body {
	height: 100%;
	overflow: hidden;
}

.navigation {
	left: 0;
	width: 100%;
	overflow: hidden;
}

.content-mask {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: #fff;
	z-index: 1;
	overflow: hidden;
}

.scroller, .mousehover .hidden-scroller, .no-mousehover .open .hidden-scroller {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow-y: auto;
}

.no-mousehover .scroll-container, .no-mousehover .open .hidden-scroller .scroll-container {
	height: 100%;
	overflow-y: auto;
}
.no-mousehover .scroller, .no-mousehover .open .hidden-scroller {
	-webkit-overflow-scrolling: touch;
}

But that's not it. The issue is that the full content is inserted inside an iframe.

<iframe id="facebookcastingiframe" 
  src="//www.elitemodellook.com/casting2018/home.web?lang=in&amp;container=site&amp;back=http://www.elitemodellook.com/in/en/home/index.htm" 
  style="left:10%;width:80%;" 
  frameborder="0"></iframe>

The iframe adjusts its size to its content.

Adding something like height: 80vh; in the style attribute makes the content fully scrollable.
To note that on responsive design with Firefox Android UA, this doesn't reproduce. So there's a kind of dependency on Android viewport and computing the iframe height with regards to its content and its parent.

[karlcow]

@theres-waldo @dholbert will know better than me.

[dholbert]

I can reproduce on my Android phone, though as @karlcow observed, this is not reproducible in responsive design mode on desktop.

Responding to / correcting something that Karl observed:

Adding something like height: 80vh; in the style attribute makes the content fully scrollable.
To note that on responsive design with Firefox Android UA, this doesn't reproduce. So there's a kind of dependency on Android viewport and computing the iframe height with regards to its content and its parent.

Actually, the iframe is sized the same in Responsive Design Mode as it is on Android. It's just that scrolling seems to be working differently in the two cases.

The iframe is indeed super-tall (it has an explicit height: 3280px` from this rule:

@media only screen and (max-width: 414px) {
	#facebookcastingiframe{
		height: 3280px;
	}
}

...and it's expecting that you'll be able to scroll its content via one of its scrollable ancestors -- e.g. the one with class="scroller" which gets:

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow-y: auto;

This should make #scroller full-screen and should make anything that overflows it (like the tall iframe) be scrollable. However, on Android, it seems that once you've tapped the iframe, its own inner (and unused) scrollframe "traps" all subsequent scrolling-taps, somehow. From then on out, you can't scroll the outer document at all. Not sure how/why... working on a reduced testcase right now.

[dholbert]

Here's a reduced testcase, with a skinnier iframe to make the "trapping" more obvious: https://jsfiddle.net/g0Ljc9f4/

Here's a version you can load on your phone (without most of the jsfiddle ui):
https://fiddle.jshell.net/g0Ljc9f4/show/

STR, from that testcase:
STEP 1. Try tapping to the right of the purple box, and scrolling up and down.
STEP 2. Try tapping inside and scrolling up and down.
STEP 3. Try tapping to the right again and scrolling up and down. Does it still work? Can you scroll to see the bottom purple border?

In Firefox on Android, I'm unable to scroll the outer scrolling context in step 3 -- after I've tapped inside the iframe, that's the only piece that Firefox will let me scroll.

@theres-waldo does this ring a bell at all?

[karlcow]

Thanks a lot @dholbert . I'll open a Core bug on Mozilla bugzilla and cc @theres-waldo

[karlcow]

Closing as a duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=1486695