I am not a big fan to add markup just for the sake of formatting. I think you should write a CSS rule to match what you want to do.

I've succeeded while using the custom css extension configuration with the following rule:

#stream:after {content: "\00A0";font-size: 100vh;}

I am really not sure we should add that in core.

Anyway, thank you for your contribution.

That looks a bit cryptic but it is easier with a single line. Leaving it for a user to work that out is probably asking a bit much.

Something like making the bigMarkAsRead button bigger to 100vh would be better. It probably needs some flex magic but I only dabble in html. I couldn't work out how to do it without looking weird.

After following the upset that happened when Feedly broke the scroll to mark as read functionality I can assure you that there are a huge number of users that like and expect that behaviour in a modern feed reader. I'm sure they would appreciate it.

Maybe I'm missing something, but this pretty much just looks like a really convoluted way of adding some padding at the bottom? (That remark applies to both the generated content and to adding it directly into the markup.)

I've tried to add a padding, but I was unsuccessful. If you come up with a different solution, be my guest.

That looks like a good idea.

I'm afraid I still fail to see the difference with a simple padding-bottom:100vh.

(Also, does display:block even work on generated content in Fx? That's annoyed me for like 15 years. Are you telling me they finally fixed it?)

@Frenzie If you can make it work with a padding-bottom, please show me 'cause I can't :'(

And yes it works on generated content :)

Hm, maybe I'm partially confused with generated content on images, but I'm pretty sure Fx didn't do display:block on generated content in the past either. Opera/Presto already did generated content and media queries correctly in '03; it took the others about a decade to mostly catch up (but not quite!).

// all the lame browsers, namely those other than Opera/Presto and Prince, don't
// do CSS generated content on images...

function show_img_titles(img) {
	img.after('<div class="show-img-title">Mouseover title: ' + img.attr('title') + '</div>');
}

function init_show_img_titles() {
	if (window.$) {
		$('img[title]').each(function(){
			show_img_titles($(this));
		});

		var observer = new MutationObserver(function(mutations) {  
			mutations.forEach(function(mutation) {
				for (var i = 0; i < mutation.addedNodes.length; i++) {
					//console.log(mutation.addedNodes[i])
					$(mutation.addedNodes[i]).find('img[title]').each(function(){
						show_img_titles($(this));
					});
				}
			});
		});
		observer.observe(document.querySelector('#stream'), { subtree: true, childList: true });
	}
	else {
		window.setTimeout(init_show_img_titles, 50);
	}
}

init_show_img_titles();

Oh yeah, sorry.

If you can make it work with a padding-bottom, please show me 'cause I can't :'(

I'm not sure what problem you were having. Did you accidentally put the padding-bottom above the padding? As in the latest commit by @primaeval it looks exactly like how I meant it.