1999198 - anime-bit.ru - It will not load more content as you scroll down the page

Status: ASSIGNED

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

Description

[Calin Tanase]

Environment:
Operating system: Android 13
Firefox version: Firefox 144.0.2/146

Steps to reproduce:

1. Go to https://anime-bit.ru/
2. Scroll down the page.

Expected Behavior:
More content will get loaded.

Actual Behavior:
Does not load more content.

Notes:

• Reproduces regardless of the status of ETP
• Reproduces in firefox-nightly, and firefox-release
• Does not reproduce in chrome

Created from https://github.com/webcompat/web-bugs/issues/187269

Comment 1

[Calin Tanase]

Attachment: scroll Nightly vs Chrome.mp4

Comment 2

[Kagami Rosylight [:saschanaz] (they/them)]

The page triggers an enormous number of fetch requests, I'm not sure how they can even survive.

Comment 3

[Kagami Rosylight [:saschanaz] (they/them)]

get (VM3977:3)
ReloadingServPost._xhr.onreadystatechange ((index):1123)
XMLHttpRequest.send
ReloadingServPost ((index):1108)
ListNotLazy ((index):1178)
onscroll ((index):1189)

	function ListNotLazy(){
		let lazyloadImages = document.querySelectorAll('.anime_list');
		lazyloadImages.forEach(element => { 
		if(isVisible(element)) element.classList.remove('lazy'); });
		if(lazyloadImages.length > 3){			
			if(isVisible(lazyloadImages[lazyloadImages.length -2])){
				if(_reloading !== null) {if(_reloading) { _reloading = false; ReloadingServPost(); }}
			}
		}
	}
	_jqScript.onload = function() {
		_comScript.src = '/src/js/comment.js';
			_comScript.async = true;
			document.head.append(_comScript);
	}
	
	onscroll = function(){
		ListNotLazy();
		let windowRelativeBottom = document.documentElement.getBoundingClientRect().bottom;
		
		let scrolled = window.pageYOffset || document.documentElement.scrollTop;
		let scrollHeight = Math.max(
            document.body.scrollHeight, document.documentElement.scrollHeight,
            document.body.offsetHeight, document.documentElement.offsetHeight,
            document.body.clientHeight, document.documentElement.clientHeight);
			
			
		
        if(window.scrollY + 40 >= scrollHeight - innerHeight){			
			//if(_reloading !== null) {if(_reloading) { _reloading = false; ReloadingServPost(); }}
			if(_offsetCom !== null){ if(_comLoad) { _comLoad = false; ReloadCom();} }
			//console.log('new page ' + windowRelativeBottom + ' ' + document.documentElement.clientHeight);
		}
		
		if(!_jqScriptLoad && !_comLoad){
			_jqScript.src = '/src/js/jquery-3.5.1.min.js';
			_jqScript.async = true;
			document.head.append(_jqScript);
			_jqScriptLoad = true;
			
			
			
			//_comLoad = false; ReloadCom();
			_jqScriptLoad = true;
		}
		
		if(document.getElementById('anime_group') != null){
			if(_groupLoad == false){
			let lazyloadImages = document.querySelectorAll('.groupImg');
				lazyloadImages.forEach(element => {
					let datasrc = element.getAttribute('data-src');
					let src = document.createAttribute('src');
					src.value = datasrc;
					element.setAttributeNode(src);
					element.removeAttribute('datasrc');
					console.log('TROOOOOOOOOOOOOOOOOOOOL');
					_groupLoad = true;
				});
			}
		}
	}

(that TROL thing is not by me)

There's the comparison with document.documentElement.clientHeight, which is... 25? How?

Comment 4

[Kagami Rosylight [:saschanaz] (they/them)]

clientHeight is for layout, so changing the team.

Comment 6

[Daniel Holbert [:dholbert]]

A few quick observations:

• This is reproducible in RDM on desktop with a mobile device-profile (nice, no need to be poking at phone remote devtools)
• This reproduces for me at first load, before I do any scrolling -- the page just shows a bunch of gray boxes rather than the actual content. So the onscroll handler in comment 3 might not be the crux of the issue here.
• :saschanaz mentioned "document.documentElement.clientHeight, which is... 25? How?". I see something slightly different (in RDM, when I scroll and hit the scroll-handler) -- for me, document.body.clientHeight is reasonably large (915) but document.body.offsetHeight is small (24). In Chrome, they're both on the order of 915.

Comment 7

[Daniel Holbert [:dholbert]]

ah sorry, I misread; saschanaz mentioned document.documentElement.clientHeight - I do see that that value is 24 for me (vs 916 in Chrome).

So yeah, that difference is the key issue here, since it impacts the site's isVisible logic, here:

			function isVisible(elem) {
				let coords = elem.getBoundingClientRect();
				let windowHeight = document.documentElement.clientHeight;
				// верхний край элемента виден?
				let topVisible = coords.top > 0 && coords.top < windowHeight;
				// нижний край элемента виден?
				let bottomVisible = coords.bottom < windowHeight && coords.bottom > 0;
				return topVisible || bottomVisible;
			}

Our small document.documentElement.clientHeight causes isVisible to return false, which then means the lazy attribute never gets removed here:

if(isVisible(element)) element.classList.remove('lazy'); });

which means these thumbnail-divs always have this style applied, which suppresses the image that they would be otherwise trying to render (as a background-image):

.lazy {
    background-image: none !important;
}

Comment 8

[Daniel Holbert [:dholbert]]

So here's what's going on here:

Firefox apparently has a quirks-mode-only quirk where document.documentElement.clientHeight doesn't include absolutely positioned content in quirks-mode. Here's a reduced testcase for that:

data:text/html,<div style="position:relative"><div style="height: 6000px;width: 300px;position:absolute;border: 5px solid black"></div><script>alert(document.documentElement.clientHeight)</script>

Firefox alerts 8, Chrome alerts the actual height of my viewport.

That comes into play here, because (if you have a mobile UA string) the site gives you HTML that has no doctype and hence ends up in quirks mode; and it has all of the page content in a tall absolutely-positioned element.

So: this all boils down to this document.documentElement.clientHeight quirks-mode behavior. That's tracked in bug 1819490, it looks like.

Comment 9

[Thomas Wisniewski [:twisniewski]]

We can ship an intervention here to override clientHeight with scrollHeight, so let's go ahead and do that.

Comment 10

[Thomas Wisniewski [:twisniewski]]

Attachment: Bug 1999198 - add an Android-only JS webcompat intervention for anime-bit.ru; r?ksenia

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/83900ee6b82f
https://hg.mozilla.org/integration/autoland/rev/7917eae003f7
add an Android-only JS webcompat intervention for anime-bit.ru; r=ksenia,webcompat-reviewers

Comment 12

[Norisz Fay [:noriszfay]]

https://hg.mozilla.org/mozilla-central/rev/7917eae003f7