Scrolling Behavior of Background Image on Deployed Website Is Erratic. It Is Supposed To Be Stationery, Expected Behavior On Local BuildHow to deploy a jekyll site locally with css, js and background images included?Floating Parallax DIV Background Image Jumps When Scrolled Over Embedded Vimeo YouTube or Flash in Chrome/Safari OnlyCSS animation of an element's background-image size on window scrollBackground image disappears on scroll and page reload in ChromeFade out background image on parallax using scrollJerky/flickering background image on scroll on Webkit and Edge (jQuery and vanillaJS)Is there anyway to get a background image to be fixed at first and then scroll?How to get background-image stay the same when switching from Scroll to fixed?How to make Layers revealing parallaxBackground image on chrome mobile failing to fill screen when scrolling
Is there any references on the tensor product of presentable (1-)categories?
copy and scale one figure (wheel)
The IT department bottlenecks progress. How should I handle this?
What is Cash Advance APR?
What if a revenant (monster) gains fire resistance?
Does Doodling or Improvising on the Piano Have Any Benefits?
What was the exact wording from Ivanhoe of this advice on how to free yourself from slavery?
Travelling outside the UK without a passport
Terse Method to Swap Lowest for Highest?
Why does the Sun have different day lengths, but not the gas giants?
Multiplicative persistence
Problem with TransformedDistribution
How much character growth crosses the line into breaking the character
Redundant comparison & "if" before assignment
Is it possible to have a strip of cold climate in the middle of a planet?
Closed-form expression for certain product
Is preaching recommended or mandatory to a temple priest?
What is going on with 'gets(stdin)' on the site coderbyte?
Find the Primitive Roots Mod 31
Infinite dials to reset ever?
How do you respond to a colleague from another team when they're wrongly expecting that you'll help them?
Biological Blimps: Propulsion
Why is it that I can sometimes guess the next note?
Does a 'pending' US visa application constitute a denial?
Scrolling Behavior of Background Image on Deployed Website Is Erratic. It Is Supposed To Be Stationery, Expected Behavior On Local Build
How to deploy a jekyll site locally with css, js and background images included?Floating Parallax DIV Background Image Jumps When Scrolled Over Embedded Vimeo YouTube or Flash in Chrome/Safari OnlyCSS animation of an element's background-image size on window scrollBackground image disappears on scroll and page reload in ChromeFade out background image on parallax using scrollJerky/flickering background image on scroll on Webkit and Edge (jQuery and vanillaJS)Is there anyway to get a background image to be fixed at first and then scroll?How to get background-image stay the same when switching from Scroll to fixed?How to make Layers revealing parallaxBackground image on chrome mobile failing to fill screen when scrolling
Built a Jekyll website based on a 3-party theme (MASSIVELY).
Code of website available here: https://git.ikrypto.club/FNB_Japan/FNBJapan
When you visit the deployed website, the background image does not remain constant as expected (You can kind of see the expected behavior on the theme demo, https://iwiedenm.github.io/jekyll-theme-massively/ (Edit: This is actually a better example, https://massively.ghost.io/ ). Basically, the background image is expected to remain constant, and the foreground should scroll with the user.).
You can witness the difference in behavior if you go on our website, https://fnb-japan.info .
However, when the code is ran locally and built with
bundle exec jekyll serve
The background image does not move (as expected). What's happening and how can I remedy it?
Note: It appears that this problem only appears on FF Nightly, and not Chrome
Edit: This appears to be a problem with Firefox Nightly, as opposed to the website. This question is technically resolved.
Edit 2: It appears that the problem persists, and is due to a bad implementation of parallax scrolling causing parallax to flicker.
Edit 3: This problem only occurs once the window is of a certain width, and the difference isn'ta ctually between local/deployed but rather different window sizes.
javascript html css
asked 2 days ago
Alana MaemiAlana Maemi
11
New contributor
Alana Maemi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
Built a Jekyll website based on a 3-party theme (MASSIVELY).
Code of website available here: https://git.ikrypto.club/FNB_Japan/FNBJapan
When you visit the deployed website, the background image does not remain constant as expected (You can kind of see the expected behavior on the theme demo, https://iwiedenm.github.io/jekyll-theme-massively/ (Edit: This is actually a better example, https://massively.ghost.io/ ). Basically, the background image is expected to remain constant, and the foreground should scroll with the user.).
You can witness the difference in behavior if you go on our website, https://fnb-japan.info .
However, when the code is ran locally and built with
bundle exec jekyll serve
The background image does not move (as expected). What's happening and how can I remedy it?
Note: It appears that this problem only appears on FF Nightly, and not Chrome
Edit: This appears to be a problem with Firefox Nightly, as opposed to the website. This question is technically resolved.
Edit 2: It appears that the problem persists, and is due to a bad implementation of parallax scrolling causing parallax to flicker.
Edit 3: This problem only occurs once the window is of a certain width, and the difference isn'ta ctually between local/deployed but rather different window sizes.
javascript html css
asked 2 days ago
Alana MaemiAlana Maemi
11
New contributor
Alana Maemi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
The background does scroll on my Chrome too (and pretty erratically)
– AKX
2 days ago
+AKX thank you, that is very helpful to know. It's really weird that this doesn't appear to be consistent behavior, and that I can't replicate it on local builds
– Alana Maemi
yesterday
add a comment |
Built a Jekyll website based on a 3-party theme (MASSIVELY).
Code of website available here: https://git.ikrypto.club/FNB_Japan/FNBJapan
When you visit the deployed website, the background image does not remain constant as expected (You can kind of see the expected behavior on the theme demo, https://iwiedenm.github.io/jekyll-theme-massively/ (Edit: This is actually a better example, https://massively.ghost.io/ ). Basically, the background image is expected to remain constant, and the foreground should scroll with the user.).
You can witness the difference in behavior if you go on our website, https://fnb-japan.info .
However, when the code is ran locally and built with
bundle exec jekyll serve
The background image does not move (as expected). What's happening and how can I remedy it?
Note: It appears that this problem only appears on FF Nightly, and not Chrome
Edit: This appears to be a problem with Firefox Nightly, as opposed to the website. This question is technically resolved.
Edit 2: It appears that the problem persists, and is due to a bad implementation of parallax scrolling causing parallax to flicker.
Edit 3: This problem only occurs once the window is of a certain width, and the difference isn'ta ctually between local/deployed but rather different window sizes.
javascript html css
asked 2 days ago
Alana MaemiAlana Maemi
11
New contributor
Alana Maemi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Built a Jekyll website based on a 3-party theme (MASSIVELY).
Code of website available here: https://git.ikrypto.club/FNB_Japan/FNBJapan
When you visit the deployed website, the background image does not remain constant as expected (You can kind of see the expected behavior on the theme demo, https://iwiedenm.github.io/jekyll-theme-massively/ (Edit: This is actually a better example, https://massively.ghost.io/ ). Basically, the background image is expected to remain constant, and the foreground should scroll with the user.).
You can witness the difference in behavior if you go on our website, https://fnb-japan.info .
However, when the code is ran locally and built with
bundle exec jekyll serve
The background image does not move (as expected). What's happening and how can I remedy it?
Note: It appears that this problem only appears on FF Nightly, and not Chrome
Edit: This appears to be a problem with Firefox Nightly, as opposed to the website. This question is technically resolved.
Edit 2: It appears that the problem persists, and is due to a bad implementation of parallax scrolling causing parallax to flicker.
Edit 3: This problem only occurs once the window is of a certain width, and the difference isn'ta ctually between local/deployed but rather different window sizes.
javascript html css
javascript html css
asked 2 days ago
Alana MaemiAlana Maemi
11
New contributor
Alana Maemi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
asked 2 days ago
Alana MaemiAlana Maemi
11
New contributor
Alana Maemi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
edited yesterday
Alana Maemi
asked 2 days ago
Alana MaemiAlana Maemi
11
New contributor
Alana Maemi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
asked 2 days ago
Alana MaemiAlana Maemi
11
asked 2 days ago
Alana MaemiAlana Maemi
11
11
New contributor
Alana Maemi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
Alana Maemi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Alana Maemi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
The background does scroll on my Chrome too (and pretty erratically)
– AKX
2 days ago
+AKX thank you, that is very helpful to know. It's really weird that this doesn't appear to be consistent behavior, and that I can't replicate it on local builds
– Alana Maemi
yesterday
add a comment |
The background does scroll on my Chrome too (and pretty erratically)
– AKX
2 days ago
+AKX thank you, that is very helpful to know. It's really weird that this doesn't appear to be consistent behavior, and that I can't replicate it on local builds
– Alana Maemi
yesterday
The background does scroll on my Chrome too (and pretty erratically)
– AKX
2 days ago
The background does scroll on my Chrome too (and pretty erratically)
– AKX
2 days ago
+AKX thank you, that is very helpful to know. It's really weird that this doesn't appear to be consistent behavior, and that I can't replicate it on local builds
– Alana Maemi
yesterday
+AKX thank you, that is very helpful to know. It's really weird that this doesn't appear to be consistent behavior, and that I can't replicate it on local builds
– Alana Maemi
yesterday
add a comment |
1 Answer
1
active
oldest
votes
The background div (#bg)
is being transformed by
this code in the bundled parallax plugin (as evident from setting a "break on attribute modification" on the bg element in the Chrome inspector), which in kind seems to be activated by this invocation:
// Background.
$wrapper._parallax(0.925);
Removing those lines should get rid of the parallax effect too.
answered 2 days ago
AKXAKX
43.9k45670
Thank you very much. I don't actually want to disable Parallax, just want it to stop flickering. Instead, I want the background image to be fixed at a specific location, and never move while the foreground scrolls.
– Alana Maemi
yesterday
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Alana Maemi is a new contributor. Be nice, and check out our Code of Conduct.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55281239%2fscrolling-behavior-of-background-image-on-deployed-website-is-erratic-it-is-sup%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
The background div (#bg)
is being transformed by
this code in the bundled parallax plugin (as evident from setting a "break on attribute modification" on the bg element in the Chrome inspector), which in kind seems to be activated by this invocation:
// Background.
$wrapper._parallax(0.925);
Removing those lines should get rid of the parallax effect too.
answered 2 days ago
AKXAKX
43.9k45670
Thank you very much. I don't actually want to disable Parallax, just want it to stop flickering. Instead, I want the background image to be fixed at a specific location, and never move while the foreground scrolls.
– Alana Maemi
yesterday
add a comment |
The background div (#bg)
is being transformed by
this code in the bundled parallax plugin (as evident from setting a "break on attribute modification" on the bg element in the Chrome inspector), which in kind seems to be activated by this invocation:
// Background.
$wrapper._parallax(0.925);
Removing those lines should get rid of the parallax effect too.
answered 2 days ago
AKXAKX
43.9k45670
Thank you very much. I don't actually want to disable Parallax, just want it to stop flickering. Instead, I want the background image to be fixed at a specific location, and never move while the foreground scrolls.
– Alana Maemi
yesterday
add a comment |
The background div (#bg)
is being transformed by
this code in the bundled parallax plugin (as evident from setting a "break on attribute modification" on the bg element in the Chrome inspector), which in kind seems to be activated by this invocation:
// Background.
$wrapper._parallax(0.925);
Removing those lines should get rid of the parallax effect too.
answered 2 days ago
AKXAKX
43.9k45670
The background div (#bg)
is being transformed by
this code in the bundled parallax plugin (as evident from setting a "break on attribute modification" on the bg element in the Chrome inspector), which in kind seems to be activated by this invocation:
// Background.
$wrapper._parallax(0.925);
Removing those lines should get rid of the parallax effect too.
answered 2 days ago
AKXAKX
43.9k45670
answered 2 days ago
AKXAKX
43.9k45670
answered 2 days ago
AKXAKX
43.9k45670
answered 2 days ago
AKXAKX
43.9k45670
43.9k45670
Thank you very much. I don't actually want to disable Parallax, just want it to stop flickering. Instead, I want the background image to be fixed at a specific location, and never move while the foreground scrolls.
– Alana Maemi
yesterday
add a comment |
Thank you very much. I don't actually want to disable Parallax, just want it to stop flickering. Instead, I want the background image to be fixed at a specific location, and never move while the foreground scrolls.
– Alana Maemi
yesterday
Thank you very much. I don't actually want to disable Parallax, just want it to stop flickering. Instead, I want the background image to be fixed at a specific location, and never move while the foreground scrolls.
– Alana Maemi
yesterday
Thank you very much. I don't actually want to disable Parallax, just want it to stop flickering. Instead, I want the background image to be fixed at a specific location, and never move while the foreground scrolls.
– Alana Maemi
yesterday
add a comment |
Alana Maemi is a new contributor. Be nice, and check out our Code of Conduct.
Alana Maemi is a new contributor. Be nice, and check out our Code of Conduct.
Alana Maemi is a new contributor. Be nice, and check out our Code of Conduct.
Alana Maemi is a new contributor. Be nice, and check out our Code of Conduct.
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55281239%2fscrolling-behavior-of-background-image-on-deployed-website-is-erratic-it-is-sup%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
The background does scroll on my Chrome too (and pretty erratically)
– AKX
2 days ago
+AKX thank you, that is very helpful to know. It's really weird that this doesn't appear to be consistent behavior, and that I can't replicate it on local builds
– Alana Maemi
yesterday