Comments (12)
Using 50 pixel bleed seems to fix most of the bad performance, but aggressive scrolling still shows jitter.
from parallax.js.
@BenRacicot If you are using bleed, the surrounding div's need to have a solid background color and you must ensure that the parallax image is behind them in z-index terms.
I'm not sure what you mean by interfering but if you mean that the bleed is overlapping them then this will be the cause. The idea of the bleed area is just to hide the actual top and bottom edges of the parallax image where the redraw raster flicker is most noticeable.
The translate above solution does not guarantee flicker free operation and it depends on your situation. We have found that some images cause flicker while some do not without any reasonable explanation. One thing for sure is that Safari consistently displays the worst flicker as I outlined above.
from parallax.js.
I'm getting the same thing. I thought the "Bleed" just needed to be adjusted, but that didn't seem to work either.
from parallax.js.
You can improve the smoothness slightly by applying the translation via an alteration to the transform3d's y value rather than the top: on the slider. I find this makes it quite smooth in Chrome. Safari will always stutter somewhat due to its lazy scroll reporting, particularly with foreground content in the parallax div it seems.
from parallax.js.
I'm wary of relying too heavily on transform3d
to handle the parallax effect directly since many users have noted it causing odd behavior in certain situations with certain browsers, and I've even recommended removing it entirely in certain cases.
As @yuvadm noted, the bleed
attribute was my hacky solution to the poor scrolling performance in Safari et al. When used properly it will prevent the hard edges from jittering, but the background will still have trouble keeping up in Safari.
I don't know currently of any way around this, but I would be open to suggestions.
from parallax.js.
@mikegreiling I totally agree with your reasoning regarding transform3d, hence I offered it as a suggestion to users rather than a pull request. It can, however, be a useful technique subject to proper situational testing. This is particularly true in circumstances where all adjacent content is transparent and so the bleed option is not appropriate and also with "difficult" foreground content on occasions.
The Safari problem is, as far as I can tell, pretty intractable and no amount of refactoring is going to help with the scroll reporting behavior, short of using scroll hijacking which comes with a whole new set of problems and limitations in the general use case.
from parallax.js.
@atavernor can you post a patch that I can try out?
from parallax.js.
@yuvadm We made wholesale changes to the plugin for our application but the translate part just needs applying to the render function as follow - I have commented out the original code and labelled the new code with ** at the start of the lines - obviously remove this. Apologies for the lack of a proper diff but I am on my iPad as I write this. I also doubt that the rounding of the pixel values has any effect but it was a case of try anything and it didn't show any adverse indications.
render: function() {
var scrollTop = Parallax.scrollTop;
var scrollLeft = Parallax.scrollLeft;
var overScroll = this.overScrollFix ? Parallax.overScroll : 0;
var scrollBottom = scrollTop + Parallax.winHeight;
if (this.boxOffsetBottom > scrollTop && this.boxOffsetTop < scrollBottom) {
this.visibility = 'visible';
} else {
this.visibility = 'hidden';
}
this.mirrorTop = this.boxOffsetTop - scrollTop;
this.mirrorLeft = this.boxOffsetLeft - scrollLeft;
this.offsetTop = this.offsetBaseTop - this.mirrorTop * (1-this.speed);
this.$mirror.css({
transform: 'translate3d(0px, 0px, 0px)',
visibility: this.visibility,
top: Math.round(this.mirrorTop - overScroll),
left: this.mirrorLeft,
height: this.boxHeight,
width: this.boxWidth + this.boxWidthComp
});
** var transl = 'translate3d( 0px,' + Math.round(this.offsetTop) +'px, 0px)';
this.$slider.css({
position: 'absolute',
//Original Plugin code that caused the flicker on the preview site
//transform: 'translate3d(0px, 0px, 0px)',
//top: Math.round(this.offsetTop),
** top:0,
** transform: transl,
left: this.offsetLeft,
height: this.imageHeight,
width: this.imageWidth
});
}
from parallax.js.
Hey guys, any updates on this since March? Also its most likely preferable to use the html method to invoke a parallax bg. In that case is there a way to apply the flicker fixes to all instances of parallax?
I've implemented the code fix ^ to the library but the flickering is exactly the same. Also I cannot see a difference in the flickering. The bleed solution is acting really strange and interfering with surrounding divs. Any ideas?
from parallax.js.
Hi Guys, still doesn't resolved? still flickering on my end.
from parallax.js.
I've fixed it with a bleed of 50.
from parallax.js.
there has recently been merged a performance improvement, please check it out!
closed antiquated issue for cleanup. if this is still rellevant, feel free to reopen.
from parallax.js.
Related Issues (20)
- text-align affects background location
- .trigger('resize').trigger('scroll') not working HOT 3
- iOS 13 issue with inner HTML HOT 2
- CDN version outdated HOT 2
- Using a semi-transparent container over background image lag HOT 1
- Resize does the exact opposite
- Using "sticky"element offsets parallax container HOT 3
- Add alt attribute? HOT 3
- Vanilla JS version? HOT 2
- V. 1.5 works on mobile devices, but this v. 2.0 does not?
- Flash on image load
- is it possible to put text on the images with html for the effect? HOT 2
- Setting speed to negative value does not reverse parallax effect
- Feature request: Support responsive images
- Parallax 2.0 not working on mobile HOT 1
- Does not work with Angular Universal HOT 2
- parallax.js limits width?! HOT 1
- Feature Request: Can you have a video parallax as well?
- Parallax is not a function
- Doesn't work properly when using it with Bootstrap
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 parallax.js.