Comments (16)
We use this in Safari, do you have a specific problem?
from parallax.js.
Ok, that's weird. It does not work on my website.
And then I checked your page (http://pixelcog.github.io/parallax.js/) where it should show a stardust background image, but the image just disappears (like on my website):
from parallax.js.
@jensemil That is not my page, I am just a user of this plugin. The page, however, works fine for me and our implementation of the plugin has undergone extensive cross browser testing. It has never failed in Safari.
from parallax.js.
i've had problems in safari. Basically when there is 2 or more parallax images present, the first one doesn't show up correctly.
http://globalsteeringsystems.asquaredhosting.com/our-technology/slider-technology/
from parallax.js.
@darknailblue Hi, This looks to me purely like a z-index issue. If I change the z-index of your fist parallax mirror to 0 (an arbitrary choice) then the image shows up just fine. Both of your mirrors are at z-index:-100 which seems unnecessary to after having a very quick look at your page - sorry if I missed the reason for it.
from parallax.js.
@atavernor you hit the nail on the head. It was totally a z-index issue. Having the z-index set at -100 is totally unnecessary. But that's what the plugin does out-of-the-box. I feel the plugin needs a few tweaks now... mainly having a progressive z-index order (to prevent this issue) and then having each of the generated parallax-mirror elements having a unique id (to do proper load animations).
from parallax.js.
@darknailblue The plugin does already have a z-index setting in the options. Just pass it as you call parallax. It shouldn't need any progressive 'auto-setting' of the z-index. We use the same z-index for all instances on a page unless we are controlling multiple layers when applying them to the body as cover parallaxes.
from parallax.js.
I'm aware it does. However in the case I just encountered, having the z-indexes built the way they are cause this issue in Safari. Right? Your provided a super quick fix for this. Thanks again!
Setting the z-indexes MANUALLY is fine but makes assumptions on how people would be using the plugin. For example, in my case, I use a custom WordPress theme on almost every website I build. The theme has a component engine in it that allows my clients to easily add content in a stylized way to their site (plus it saves me loads of time).
The point is that using that approach, I have to have extraneous CSS or JavaScript that manually overrides the z-indexes of each parallax-mirror instance to make sure this bug doesn't happen in Safari. Again... that's FINE but, its a hack and takes a decentralized approach to coding - which I like to avoid. The plugin should be responsible for tasks like that. Not code that interacts with it.
Having the plugin be aware of each parallax instance and setting the z-indexes (and unique IDs) appropriately would SOLVE this bug. Furthermore, in most cases, it wouldn't require any users to have to modify their code when upgrading or even setting z-indexes in the first place.
from parallax.js.
I see where you are coming from. Our implementation is also as a plugin (although not for wordpress). Our plugin just automatically sets the z-index to 0 unless users have dropped it in as a body cover parallax, in which case they are layered via z-index. This layering is peculiar to our implementation and would be very difficult to abstract in a reasonable fashion in the parallax plugin itself without a considerable amount of code that would be redundant in most use cases. Hence we just wrap parallax.js in our own plugin.
I realize that this is a different situation to yours but the bit I don't understand is why you need a different z-index for each parallax. Assuming each instance is not pushed behind the body background then surely they will all work with the same z-index as the positions of the divs on which the plugin is called are different and so it calculates the parallax-slider positions accordingly.
Apologies if I am missing something here, regarding your implementation.
from parallax.js.
No apologies needed! Basically what it seemed like was happening in Safari is that the parallax-mirrors are stacked in the OPPOSITE way that they appear in the page. Because all the parallax-mirror instances appear at the top of the page and are fixed positioned and have a defined height, the parallax instances that appear further down the page have their parallax-mirror clones overlapping incorrectly.
Does that make sense?
from parallax.js.
Yes, that makes perfect sense, I understand now. So that means that the question is why the parallax-mirror instances are in the wrong place.
The only possible reason for this, I would have thought is if the plugin is being called on a DOM element that out of the normal page flow. I must admit it is never something I have come across during out extensive testing (and we do have users who try to do odd things!).
At the end of the day parallax.js merely prepends the parallax-mirrors to the body in the order that it finds them in the DOM.
Sorry I can't be more precise than this without knowing your exact situation but it may be worth testing with a simple page with just 2 or 3 consecutive parallaxes on it and see what happens.
from parallax.js.
@atavernor Does http://pixelcog.com/parallax.js/ look fine for you in Safari, then? What about my site http://jensemil.dk - do you see the parallax effect in Safari as well?
In case you do, it is really weird that I see a problem with the plugin in Safari, but not in Chrome...
from parallax.js.
@jensemil Yes the http://pixelcog.com/parallax.js/ looks fine to me but your page does not parallax in safari. The reason is that you have bound an event to the page scroll which seems to be interfering with the parallax scroll detection. If I comment out the following, your page works just fine in Safari
// jQuery for page scrolling feature - requires jQuery Easing plugin
// $(function() {
// $('a.page-scroll').bind('click', function(event) {
// var
// $('html, body').stop().animate({
// scrollTop: $($anchor.attr('href')).offset().top
// }, 1500, 'easeInOutExpo');
// event.preventDefault();
// });
from parallax.js.
Same problem here with Safari, occure with my development and with http://pixelcog.com/parallax.js/
from parallax.js.
Set different data-z-index="" for each images. Its work for me.
from parallax.js.
closing old issues for cleanup purposes. feel free to reopen if this issue is still relevant.
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.