Im currently in the process of fixing a wordpress site for a client, unfortunately I am having tons of issues with scrolling on one of the pages. I have tried time and time again to remove any scroll assist js that could be causing it but I still cant seem to get it to work.
Here is the URL for the page giving me trouble: http://www.bombaygrilloh.com/home/menu/
Any help is greatly appreciated!
You issue is background-attachment
Chris Ruppel writes:
[...] using background-attachment: fixed causes a paint operation every time the user scrolls. Why? Well, the page has to reposition the content, and then, since its background image is supposed to appear as if it’s holding still, the browser has to repaint that image in a new location relative to its actual DOM elements. The performance for this feature is so bad that iOS simply ignores this property.
The culprit is your header background image.
it is fixed and is consistently getting repainted on scroll behind your page content.
In you CSS file you have this
.section-parallax {
background-attachment: fixed;
}
If you remove that then you smooth scrolling without trouble but you loose the parallax effect.
If you must have the parallax effect then you need to either use a more efficent method for the effect or hack your way to it.
for more efficiency use jQuery. I found a pen by Marcel Schulz and copied it below for reference:
/*
See https://codepen.io/MarcelSchulz/full/lCvwq
The effect doens't appear as nice when viewing in split view :-)
Fully working version can also be found at (http://schulzmarcel.de/x/drafts/parallax).
*/
jQuery(document).ready(function() {
$(window).scroll(function(e) {
parallaxScroll();
});
function parallaxScroll() {
var scrolled = $(window).scrollTop();
$('#parallax-bg-1').css('top', (0 - (scrolled * .25)) + 'px');
$('#parallax-bg-2').css('top', (0 - (scrolled * .4)) + 'px');
$('#parallax-bg-3').css('top', (0 - (scrolled * .75)) + 'px');
}
});
body {
background: rgba(230, 231, 232, 1);
height: 4600px;
}
/* foreground (balloons/landscape)*/
div#parallax-bg-1 {
position: fixed;
width: 1200px;
top: 0;
left: 50%;
margin-left: -600px;
z-index: 1;
}
/* background middle layer*/
div#parallax-bg-2 {
position: fixed;
width: 1200px;
top: 0;
left: 50%;
margin-left: -600px;
z-index: 2;
}
/* background layer */
div#parallax-bg-3 {
position: fixed;
width: 960px;
top: 0;
left: 50%;
margin-left: -470px;
z-index: 3;
}
/* foreground */
div#parallax-bg-3 div {
background-repeat: no-repeat;
position: absolute;
display: block;
overflow: hidden;
}
div#bg-3-1 {
background: url('http://schulzmarcel.de/x/drafts/parallax/img/balloon.png');
width: 529px;
height: 757px;
top: -100px;
right: 100px;
}
div#bg-3-2 {
background: url('http://schulzmarcel.de/x/drafts/parallax/img/balloon2.png');
width: 603px;
height: 583px;
top: 1050px;
right: 70px;
}
div#bg-3-3 {
background: url('http://schulzmarcel.de/x/drafts/parallax/img/balloon3.png');
width: 446px;
height: 713px;
top: 1800px;
right: 140px;
}
div#bg-3-4 {
background: url('http://schulzmarcel.de/x/drafts/parallax/img/ground.png');
width: 1104px;
height: 684px;
top: 2800px;
right: 0px;
}
/* middle layer clouds */
div#parallax-bg-2 div {
background: url('http://schulzmarcel.de/x/drafts/parallax/img/cloud-lg1.png');
background-repeat: no-repeat;
position: absolute;
display: block;
width: 488px;
height: 138px;
overflow: hidden;
}
div#bg-2-1 {
top: 100px;
left: -310px;
}
div#bg-2-2 {
top: 270px;
right: -70px;
}
div#bg-2-3 {
top: 870px;
left: -300px;
}
div#bg-2-4 {
top: 1120px;
right: -130px;
}
div#bg-2-5 {
top: 1620px;
left: 140px;
}
div#bg-2-6 {
top: 720px;
left: 340px;
}
/*background layer clouds */
div#parallax-bg-1 div {
background-repeat: no-repeat;
position: absolute;
display: block;
width: 488px;
height: 138px;
overflow: hidden;
}
div#bg-1-1 {
background: url('http://schulzmarcel.de/x/drafts/parallax/img/cloud-sm1.png');
top: 200px;
right: 450px;
}
div#bg-1-2 {
background: url('http://schulzmarcel.de/x/drafts/parallax/img/cloud-lg2.png');
top: 420px;
left: 0px;
}
div#bg-1-3 {
background: url('http://schulzmarcel.de/x/drafts/parallax/img/cloud-sm1.png');
top: 850px;
right: -290px;
}
div#bg-1-4 {
background: url('http://schulzmarcel.de/x/drafts/parallax/img/cloud-sm1.png');
top: 1350px;
left: 200px;
}
div#bg-1-5 {
background: url('http://schulzmarcel.de/x/drafts/parallax/img/cloud-lg2.png');
top: 1200px;
left: -200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div id="parallax-bg-3" class="parallax-bg">
<div id="bg-3-1"></div>
<div id="bg-3-2"></div>
<div id="bg-3-3"></div>
<div id="bg-3-4"></div>
</div>
<div id="parallax-bg-2" class="parallax-bg">
<div id="bg-2-1"></div>
<div id="bg-2-2"></div>
<div id="bg-2-3"></div>
<div id="bg-2-4"></div>
<div id="bg-2-5"></div>
<div id="bg-2-6"></div>
</div>
<div id="parallax-bg-1" class="parallax-bg">
<div id="bg-1-1"></div>
<div id="bg-1-2"></div>
<div id="bg-1-3"></div>
<div id="bg-1-4"></div>
<div id="bg-1-5"></div>
</div>
</body>
</html>
In the same article I quoted above, there is a tutorial for how to fix the issue with CSS. Instead of using background-attachment: fixed you add the background to a pseudo-element and give it postion fixed like so
.element {
position: relative;
}
.elemnt:before {
content: ' ';
position: fixed; /* instead of background-attachment */
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: white;
background: url('/img/front/strategy.jpg') no-repeat center center;
background-size: cover;
will-change: transform; /* creates a new paint layer */
z-index: -1;
}
And this will essentially limit the impact on scrolling as the "background" would have it's own independent element.
Note: If you run into issues which you cannot debug, open the dev tools and start deleting elements from the page one by one until you find the issue.
Resources:
https://www.w3.org/TR/css-will-change-1/
http://caniuse.com/#feat=will-change
https://www.youtube.com/watch?v=QU1JAW5LRKU
https://developers.google.com/web/tools/chrome-devtools/
From looking at your site, there are a few parts of it that are slowing down the rest. Here are a few easy ways to speed it up.
Use a CDN
A CDN (Content Distribution Network) ensures that everything is loaded faster because it doesn't depend on your own Wordpress server and will allow access times to be consistent across the world. There are a few good ones out there like CloudFlare and Incapsula. Here is an article listing a few more.
In addition, you can host your images (I see that one is coming from Wikipedia) on a slightly faster
Compress images
This step is as easy as converting photos to a .jpg. JPEG automatically compresses the data by getting rid of unnecessary information in the photos. You can also use compression software to get the file size down.
Leverage caching
Use a caching plugin (there are tons of great ones for Wordpress) to cache data on your server and can really speed up things for your site.
Search for more ways to optimize
Use tools like Pingdom and Google PageSpeed Insights to identify bottlenecks and resolve them.
Hope this helps you!
Related
Basically I have a parallax scene using parallax.js library.
Inside the scene I have a couple of divs with unique parallax settings data tags.
And inside one of these divs I have an element which I want apply tilt effect to(when its getting mouseover'ed). But it doesnt work, the transformations from tilt lib arent being applied if an element is inside the scene however it works if I move it out of the parallax scene.
I think the problem lies somewhere around the management of OnMouseMove events or maybe it cannot work that way(when transform is being applied to an already transformed element's child).
Chrome EventListeners tab shows that both parallax and tilt mousemove listeners exist.
I would appreciate any help. If you need any code snippets I can provide it, since right now I actually don't know what particular parts to show and dont want to copy paste the whole libs.
UPD.
here's a snippet of what im trying to do:
$(document).ready(function() {
var scene = $('.prlx-scene').get(0);
var parallaxInstance = new Parallax(scene, {
relativeInput: true,
invertX: false,
invertY: false
});
});
.fulld,
.prlx-scene {
position: relative;
height: 100%
}
.prlx-scene {
width: 80%;
margin-right: auto;
margin-left: auto
}
.fulld {
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 12;
display: block;
width: 100%;
background-color: #000fff;
background-position: 50% 50%;
background-size: cover
}
.platonic-left-front-img {
position: absolute;
display: block;
}
.platonic-left-front {
z-index: 40;
}
.platonic-left-front-img {
left: 20%;
max-width: 100%;
max-height: 100%;
width: 50%;
top: 40%
}
.pc-text1 {
top: 50%;
left: 10%;
display: block;
position: fixed;
width: 15%;
height: 15%;
background-color: #00ffff;
}
.pc-text {
top: 50%;
left: 30%;
display: block;
position: fixed;
width: 15%;
height: 15%;
background-color: #00ffff;
}
img {
max-width: 100%;
vertical-align: middle
}
.scene-block {
width: 100%;
top: 0;
left: 0;
right: 0;
height: 100%;
bottom: 0;
margin-top: 0
}
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>
</head>
<body style="height:100%;position:absolute;width:100%;">
<div class="pc-text1" data-tilt data-tilt-max="40" data-tilt-speed="200" data-tilt-perspective="500" data-tilt-reverse="true" style="z-index:9999;transform-style: preserve-3d;">
<p style="transform: translateZ(50px);">TEXT</p>
</div>
<div class="fulld">
<div class="prlx-scene">
<div class="scene-block" data-depth="0.8"><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" class="platonic-left-front-img"></div>
<div class="scene-block" data-depth="0.85">
<div class="pc-text" data-tilt data-tilt-max="90" data-tilt-speed="400" data-tilt-perspective="500" data-tilt-reverse="true" style="transform-style: preserve-3d;">
<p style="transform: translateZ(50px);">TEXT</p>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vanilla-tilt#1.6.1/lib/vanilla-tilt.min.js"></script>
</body>
Found out that parallax scene disables pointer events.
So in order for that to work I needed to add style="pointer-events: all;" to an element that is being tilted.
I am using jQuery to make a background image appear fixed (since background-attachment: fixed doesn't play nicely with background-size: cover). In some environments the image doesn't flicker but in others it does, and I can't figure out why. (A related but different question is here, but I'm not using parallax scrolling.)
It doesn't flicker here and on this fiddle:
$(window).scroll(function() {
var scrolledY = $(window).scrollTop();
$('#bg').css('background-position', 'left ' + scrolledY + 'px');
});
body {
height: 3000px;
margin: 0;
}
#bg-wrap {
position: relative;
width: 100%;
}
#bg {
height: 600px;
width: 100%;
position: relative;
background-attachment: scroll;
background-image: url('http://classicescapes.businesscatalyst.com/Images/home-banner/CAPE_RT_desat.jpg');
background-position: left top;
background-repeat: no-repeat;
background-size: cover!important;
}
#bg-text {
position: absolute;
top: 200px;
left: 47%;
font-size: 3rem;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="bg-wrap">
<div id="bg">
</div>
<div id="bg-text">Hello!</div>
It flickers here when using Webkit and Edge browsers (but doesn't flicker on IE and Firefox).
Over here it flickers until one initializes a Google Map by clicking on the "Region Map" tab.
Any help as to understanding the cause and providing a possible fix would be greatly appreciated.
Try using:
transform-style:flat
on the css rule of the flickering image
or
html{
overflow: hidden;
height: 100%;
}
body{
overflow: auto;
height: 100%;
}
While I still don't know what is causing the issue on the test page, I fixed my original problem by removing a rogue CSS transform!
I need to make a div invisible to the browser. I mean, i have a div which it's something like a mark and i have another div that contain a google maps.
I put the next code for better understanding.
<div id="marc" class="marco"></div>
<div id="canvas-map"></div>
Style:
.marco{
position: absolute;
width: 100%;
height: 100%;
left: 0;
bottom: 0;
z-index: 10;
background: url("vintaje-montaje.png") no-repeat;
background-size: 100% 100%;
}
The problem is the next: the div than works us a mark ("#marc") works fine. It's look fine. But as is ahead of the other div, i can't use the google maps.
I thought use jQuery and use e.preventDefault() when the mouse is over the div what not work.
Help me please.
Thanks and forgive me for my bad English.
pointer-evens: none will allow your mouse / touch events to pass through .marco to the underlying elements:
.marco{
position: absolute;
width: 100%;
height: 100%;
left: 0;
bottom: 0;
z-index: 10;
background: url("vintaje-montaje.png") no-repeat;
background-size: 100% 100%;
pointer-events: none;
}
See browser support.
I'm working on this website called http://martindue.dk/mmd3x9x/ and I have this scroll to top script that just won't coorporate. I've used the script on many other sites, and it works fine, but on this particular website the div#to-top keeps on re-appearing, even though I'm at the very top of the website, why won't it fade out correctly when at the top?
My code looks like this (the #to-top is insertted after the body-tag in my html):
Javascript
jQuery(document).ready(function() {
$toTop = jQuery("#to-top");
$toTop.hide();
jQuery(window).scroll(function() {
if(jQuery(this).scrollTop() != 0) {
$toTop.fadeIn();
} else {
$toTop.fadeOut();
}
});
$toTop.click(function() {
jQuery("body, html").animate({ scrollTop : 0 }, 500);
return false;
});
});
CSS
#to-top {
background: url("img/to-top.png") center top no-repeat;
background-size: 100%;
width: 50px;
height: 50px;
position: fixed;
bottom: 60px;
right: 60px;
cursor: pointer;
/*display:none;*/
/*opacity: 0.0;*/
}
I created this fiddle, and here it works fine: http://jsfiddle.net/2Rubp/
I know it is not js but in this case you are only using fading so css can do the trick:
#to-top {
background: url("img/to-top.png") center top no-repeat;
background-size: 100%;
width: 50px;
height: 50px;
position: fixed;
bottom: 60px;
right: 60px;
cursor: pointer;
**-webkit-transition: all 0.5s linear;**
display: none;
opacity: 0.0;
}
NB: this is for chrome see this for cross browser compatibility
http://www.w3schools.com/css/css3_transitions.asp
I'm having some trouble with a page that has a floating background image (absolutely positioned) where the image is dynamically changed out via javascript. Basically this is a big gallery that changes behind a portfolio:
I have a section of markup that looks like this:
<div class="content">
<div class="content-container">
<div class="content-image">
<img id="galleryTarget" src="../images/main/source.jpg" class="image-resize" alt="background image"/>
</div>
...etc...
Here's the relevant CSS classes:
.image-resize {
position: absolute;
min-height: 750px;
min-width: 1000px;
width: 100%;
left: 0;
text-align: left;
vertical-align: middle;
margin-top: -25%;
top: 25%;
}
.content-image {
position: absolute;
top: 0;
left: 200px;
width: 100%;
min-height: 750px;
max-height: 750px;
min-width:1000px;
overflow:visible;
opacity: 0.5;
z-index: 1;
}
.content-container {
position: relative;
min-height: 750px;
}
.content {
position: absolute;
top: 0;
width: 100%;
max-height: 750px;
overflow: hidden;
background: purple;
z-index: -5;
}
This is all absolutely positioned so that I can swap out the image source with Javascript and then dynamically resize the container (background) to fill the new content. There's minimum bounds so it always has a size.
What I'm trying to do is to pin this image to a CENTER point so that when it is resized the interesting parts of the image (rarely the top left corner) are displayed.
In the inspector in chrome I see that top and margin-top are never the same value even though they have the same (percentage) value. What am I missing here?
Example:
top: 187.5px and margin-top: -389.5px. It looks as though margin-top uses the img-source resolution and top uses something for the life of me I can't figure out--I'm assuming min-height + the offset in the page?
Any help here would be appreciated, this is a rather large part of the design and I'd love to have it better than what it is.
Browsers:
Chrome Version: 30.0.1599.66 m
Android Chrome: 30.0.1599.82
This does fix the problem in chrome--but I'd like to know why it is using 1000px as the baseline for the margin instead of the 750px of the unit.
/*Hack of a vector similar to 50%*/
margin-top: calc(-50% * 0.75);
top: 50%;