Publication cover image hyper-zooms when browsing on widescreen display

[shadowbottle]

I tested on the demo site as well - not sure if this has something to do with the new auto-resizing image feature in Ghost 2.x but there's a width at which the publication image zooms in and gets hyper pixelated. I'm running at 3440x1440 and when I stretch out past 480 wide the zoom looks terrible even with high resolution images. Otherwise, I friggin love this theme <3

[shadowbottle]

Ex:

and

[MatRouault]

Same issue here. Otherwise wonderful theme, thank you @JohnONolan :-)

[shadowbottle]

Is this not the right place to note bugs? If anyone sees this please let me know. Thanks! <3

[myraiganai]

Theme's got the same issue on my end. I checked the static version on the HTML5UP website, but it doesn't have that bug. So it's probably an error related to Ghost.

[itsbhanusharma]

I was playing around with this issue on the f12 developer console, looks like the property:

#wrapper > .bg {
	background-position: top center;
	background-size: cover; 
}

commenting out background-size: cover; fixes the issue and the wallpaper returns to it's original size.

EDIT: It has a side effect. It adds a space in the footer if the page is scrolled all the way down.

e.g. :

The gray area in the very bottom is not the part of the original wallpaper I used.

[aileen]

Took me a while to figure this out! The pixelated effect is actually not caused by the background-size:cover attribute, but rather by the overlay, that is also used in the original Massively theme.

The reason for that is because we're passing one background-size value, but are actually targeting three different backgrounds (the overlay, the gradient, and the actual publication cover). Passing three values like background-size:auto,auto,cover; fixes the issue as much as possible.

Before:

After:

[shadowbottle]

This does not resolve the issue I was reporting, sadly. It adds an additional zoom level to the image, which feels like maybe progress? As soon as the browser window expands, horizontally, past 480 the background image does not stretch to scale, instead it becomes so large in the background that is no longer recognizable. @AileenCGN In your example images notice the top of the palm tree retains position next to the "..st" and the RSS logo next to a roof, while in my example images "..ent" and RSS logo in my example images are in the same place, but the background image has magnified to such a degree that you can't even tell the background image is the same any longer - that zoom is what generates the pixelation referred to.

[aileen]

@shadowbottle Any help here is appreciated!

[shadowbottle]

@shadowbottle Any help here is appreciated!

My experience here is limited, I'm trying to learn about it as I go! I just wish the image would simply scale with the browser size instead of staying static until width=(x), but I haven't learned how to modify the theme to do that :-/

[JohnONolan]

Sorry - but unless someone provides a live, working test case of this issue then it isn't going to get worked on. Can't guess what's happening from screenshots

[shadowbottle]

No problem, totally understandable - you can test this on the theme example page here: https://massively.ghost.io/ This should provide the most stable and accessible use-case. It will, however, require that you are using a display with some horizontal width. I'm working at 3440x1440. I've created a video in hopes that it might help, which can be viewed here: https://www.dropbox.com/s/2uvsqvez1par21x/Desktop%202019.03.19%20-%2015.19.20.01.mp4?dl=0

[kevinansfield]

@shadowbottle it would be useful if you can provide details about your environment such as browser and browser version. I'm not able to reproduce what you see in your video in Chrome, Firefox, or Safari on macOS.

[kevinansfield]

Sorry, I was mistaken, apparently my 4k monitor with scaling isn't wide enough 😳

The problem stems from a 1281px breakpoint in the JS that removes the parallax scroll of the background element. If you want to look at a fix you'll need to look at the difference between .bg and .bg-fixed classes - I think it has something to do with a missing height: 100vh style but I don't know what knock-on effects having that has on the non-fixed version.

[shadowbottle]

Sorry, I was mistaken, apparently my 4k monitor with scaling isn't wide enough 😳

The problem stems from a 1281px breakpoint in the JS that removes the parallax scroll of the background element. If you want to look at a fix you'll need to look at the difference between .bg and .bg-fixed classes - I think it has something to do with a missing height: 100vh style but I don't know what knock-on effects having that has on the non-fixed version.

lol Yeah, I have my browser set to about 45% the width of my 3440 pixel width, and it feels natural but it always triggers this behavior with Massively, and as 21:9 displays are getting more popular I figured/hoped a simple tweak would do the trick. Thanks so much for looking into this - I'll take a look and start reading some stuff and play around and report back if I can deduce a solution!

[mskyttner]

Firstly, thanks for a real nice theme!

It seems to me that the theme works better on Chrome (Chromium), however using Firefox I think this issue with "hyperzoom" is still there if the window width is greater than 1280, at least I've seen it myself and I have also heard reports from several other users I have on a blog I've themed with Massively.

This one-liner can be used to replicate the issue using docker to run the latest FIrefox browser inside any existing other browser:

docker run --rm --name=firefox --shm-size 2g -p 5800:5800 \
    -e DISPLAY_WIDTH=1281 \
    -e 'FF_PREF_HOMEPAGE=browser.startup.homepage=\"https://nya.stolpverk.org\"' \
    -e 'FF_PREF_PAGE=browser.startup.page=0' \
    jlesage/firefox

This runs up-to-date Firefox inside your browser, with the width set to 1281, so open up "http://localhost:5800" after executing the command above (requires docker) and then press the Home button inside the Firefox application which will be running inside your regular browser. Notice the "hyperzoom".

If the same command is run with the DISPLAY_WIDTH env var set to 1280 it looks good and there is no "hyperzoom".

A couple of screenshots are also attached with 1281 (first one) width versus 1280 width (second one):

Perhaps a clue is this message in the JS Console in Firefox (using the latest stable version):

This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects for further details and to join the discussion on related tools and features!

I'm not a web designer so please accept my input for what it is - a report with a reproducible way to replicate that the issue prevails.

The JS console message leads to these links, which may be relevant (?) in the setting:

• https://staktrace.com/spout/entry.php?id=834
• https://staktrace.com/resources/extras/spout/scroll-behavior.html

Thanks again for a fantastic great looking theme, it would be great if the styles could be updated to work on Firefox browsers with display widths greater than 1280, and I am hoping for the community (or @JohnONolan ?) to come up with a fix so that we can stick with this theme which is preferred for us esp if the hyperzoom bug can be fixed!

[EmmanuelZapata]

I'm having the same issue. With Chrome. Thank you for the hard work on this theme! It's awesome!

[sitnin]

This diff will fix the issue: https://gist.github.com/sitnin/fe790b4f209a18ecbb2f0efa04f015e8

[mskyttner]

Thanks @sitnin - confirming that it solves the issue for me. I tried to apply your patch and tested the theme with Firefox + Chrome. I used this Makefile to test your solution on the master branch:

#! make

patch-issue-3:
	wget -O issue-3.diff "https://gist.githubusercontent.com/sitnin/fe790b4f209a18ecbb2f0efa04f015e8/raw/e5c3dd45d025b40af3ab5a9f59f666df71340201/_ghost.css.diff"
	git apply issue-3.diff
	#gulp
	gulp zip
	@echo "Pls upload dist/Massively.zip to your ghost instance and apply this theme"

test-issue-3:
	docker run --rm --name=firefox --shm-size 2g -p 5800:5800 \
		-e DISPLAY_WIDTH=1281 \
		-e 'FF_PREF_HOMEPAGE=browser.startup.homepage=\"https://stolpverk.org\"' \
		-e 'FF_PREF_PAGE=browser.startup.page=0' \
		jlesage/firefox
	xdg-open http://localhost:5800

Hopefully we'll hear from the maintainers whether they accept this change. It seems to address a major issue with this theme that most people would suffer from unless they're on a mobile device.

[shadowbottle]

This diff will fix the issue: https://gist.github.com/sitnin/fe790b4f209a18ecbb2f0efa04f015e8

Soooooo... After mskyttner posted success, I gave this a try on my two published ghost sites, and no luck, and was dumbfounded. So, I decided to rollout another instance on an unused domain name and lo and behold, it worked! Doubly confounding.

Then I added some test posts. And confirmed on my other two pages by unpublishing posts. This fix only seems to work when there is only a single post. As soon as you add a second post or more (with post image), it seems to revert back to the old behavior >_<

If I have multiple posts, but remove the post images, it goes back to working.

I confirmed in my theme files, swapped themes, restarted ghost, installed new browsers (this is happening in Firefox Nightly, and Chrome - the non-chromium version of Edge doesn't suffer this issue), and still seeing it.

Testing at https://tacocatistacocatbackwards.com/

Currently I have it set with 3 posts, 1 with a post image, and with this fix implemented, it's still exhibiting the behavior where when the page is stretched too wide it hyper-zooms on the bg image.

Edit: to be clear, thanks so much for applying efforts to fix this issue <3 <3 <3

[andyvans]

Interesting problem that appears to be related to the screen width. I consistently see the problem on a 1680x1050 monitor. I ended up hacking the CSS in my site, but the cover image doesn't always scroll correctly.

[caiodelgadonew]

This diff will fix the issue: https://gist.github.com/sitnin/fe790b4f209a18ecbb2f0efa04f015e8

@sitnin , how to apply after modificate it? on F12 console works well, after changed in code and restart ghost the configuration stays with value cover

[andyvans]

@caiodelgadonew Go to your ghost side admin and add a code injection block.

https://{yoursite}/ghost/#/settings/code-injection

Add this to the site header section:

<style>
    #wrapper>.bg {
  		background-position: top center;
        background-size: auto, auto, 100% auto;        
	}
</style>

[shadowbottle]

@caiodelgadonew Go to your ghost side admin and add a code injection block.

https://{yoursite}/ghost/#/settings/code-injection

Add this to the site header section:

<style>
    #wrapper>.bg {
  		background-position: top center;
        background-size: auto, auto, 100% auto;        
	}
</style>

So this... works. But what you wind up with then is that it doesn't responsively stretch the image down. So as you scroll down you can see the bottom of the image, and then it cuts into blank space behind your posts. It's so damn close though! lol

https://tacocatistacocatbackwards.com/

edit: Hmm... ok so at super wide widths it works fine, but in between widths you wind up with the blank space. I still think it works out better, so I'll adopt this solution - which for whatever reason, wouldn't result in the same outcome when added to the the theme files. ::shrug::

[andyvans]

Yes it's not quite there. When I have my Windows 10 display text size at 125% it works perfectly. When I have the Display settings text size at 100% I get the background image scrolling.

The root of the issue appears to be in the javascript transformation code.

[andyvans]

@caiodelgadonew You can also make your background image a lot taller. Then you don't see the blank space at the bottom I copied by image and vertically flipped it, then pasted into the bottom of the image to create an 1600x3200 image.

[andyvans]

What is also interesting is the this looks rubbish:
https://massively.ghost.io/
But this looks great:
https://html5up.net/uploads/demos/massively/index.html

I compared all the javascript - identitical.
I compare the css - identitical for the html5up.net parts, but ghost adds extra bits - and I think this is where the problem starts.

[keltonhalbert]

This has been quiet for a while but I'm having the same issues with the header image. I've adopted the injection solution, but any word on a permanent fix?

[minimaluminium]

The hyper-zoom issue was fixed in f313392. For the issue of blank space at the bottom of the page as @shadowbottle pointed out here, using an image faded out at the bottom could be a possible solution/trick. For example, here is the image used on html5up.net demo.