Giter Site home page Giter Site logo

Safari support about parallax.js HOT 16 CLOSED

jensemil avatar jensemil commented on August 24, 2024
Safari support

from parallax.js.

Comments (16)

atavernor avatar atavernor commented on August 24, 2024

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

from parallax.js.

jensemil avatar jensemil commented on August 24, 2024

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):
screenshot 2015-03-31 10 30 22

from parallax.js.

atavernor avatar atavernor commented on August 24, 2024

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

darknailblue avatar darknailblue commented on August 24, 2024

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.

atavernor avatar atavernor commented on August 24, 2024

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

darknailblue avatar darknailblue commented on August 24, 2024

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

atavernor avatar atavernor commented on August 24, 2024

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

darknailblue avatar darknailblue commented on August 24, 2024

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.

atavernor avatar atavernor commented on August 24, 2024

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.

darknailblue avatar darknailblue commented on August 24, 2024

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.

atavernor avatar atavernor commented on August 24, 2024

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.

jensemil avatar jensemil commented on August 24, 2024

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

atavernor avatar atavernor commented on August 24, 2024

@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();
// });

from parallax.js.

skrosoft avatar skrosoft commented on August 24, 2024

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

from parallax.js.

salindalakmal avatar salindalakmal commented on August 24, 2024

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

from parallax.js.

wstoettinger avatar wstoettinger commented on August 24, 2024

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

from parallax.js.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.