Comments (28)
@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>
from massively.
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.
from massively.
Same issue here. Otherwise wonderful theme, thank you @JohnONolan :-)
from massively.
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.
from massively.
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.
The gray area in the very bottom is not the part of the original wallpaper I used.
from massively.
@shadowbottle Any help here is appreciated!
from massively.
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
from massively.
This diff will fix the issue: https://gist.github.com/sitnin/fe790b4f209a18ecbb2f0efa04f015e8
from massively.
from massively.
Is this not the right place to note bugs? If anyone sees this please let me know. Thanks! <3
from massively.
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.
from massively.
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.
from massively.
@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 :-/
from massively.
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
from massively.
@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.
from massively.
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.
from massively.
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 missingheight: 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!
from massively.
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!
from massively.
I'm having the same issue. With Chrome. Thank you for the hard work on this theme! It's awesome!
from massively.
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
from massively.
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.
from massively.
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
from massively.
@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::
from massively.
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.
from massively.
@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.
from massively.
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.
from massively.
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?
from massively.
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.
from massively.
Related Issues (20)
- Time for a new release? HOT 2
- Ghost 5.X theme compatibility
- Add Native Search Feature HOT 2
- Adjust width of pages?
- RSS link structure in Nav is outdated HOT 2
- A Bunch of Errors on Ghost v3.0.0
- How to print tags on page in this themes HOT 1
- background is shaky while scrolling in firefox HOT 2
- Subscribe feature not working HOT 2
- Adding /rss results in error 400 HOT 1
- Missing template rss.hbs when adding /rss to url HOT 1
- Action Required: Fix Renovate Configuration
- [feature suggestion] Search function
- Header Image resize options HOT 2
- 404 page does not reflect the changes made to default.hbs HOT 1
- No secondary menu HOT 1
- Error editing something in _main.scss HOT 8
- Dependency Dashboard
- How can I add auto-darkmode HOT 1
- Long post/page scrolling causes header and menu to dissapear HOT 7
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from massively.