Safari support

[jensemil]

Safari support

[atavernor]

We use this in Safari, do you have a specific problem?

[jensemil]

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):

[atavernor]

@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.

[darknailblue]

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/

[atavernor]

@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.

[darknailblue]

@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).

[atavernor]

@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.

[darknailblue]

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.

[atavernor]

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.

[darknailblue]

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?

[atavernor]

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.

[jensemil]

@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...

[atavernor]

@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 $anchor = $(this);
// $('html, body').stop().animate({
// scrollTop: $($anchor.attr('href')).offset().top
// }, 1500, 'easeInOutExpo');
// event.preventDefault();
// });

[skrosoft]

Same problem here with Safari, occure with my development and with http://pixelcog.com/parallax.js/

[salindalakmal]

Set different data-z-index="" for each images. Its work for me.

[wstoettinger]

closing old issues for cleanup purposes. feel free to reopen if this issue is still relevant.