EdgeHTML 17 and visual issues with demonstration-page

[pxamike]

I noticed that jarallax seems to work worse in the latest Microsoft Edge (EdgeHTML 17) that came with Windows 10 April 2018 update, compared to EdgeHTML 16.

I tried the demonstration page on latest commit (e197548) locally, but it seems to happen on the demo-site also: https://free.nkdev.info/jarallax/ (which uses 1.10.2). Tests were done in BrowserStack. Perhaps this is more an issue with the demonstration page than the jarallax-library itself?

In EdgeHTML17 all the full-width jarallax images are aligned to the top of the screen. So all the full-width jarallax image-areas further down the page are blank white areas. In 16 it looks the same as current Chrome or Firefox.

EdgeHTML16:

EdgeHTML17:

I was able to "fix" the behaviour by disabling the "z-index: -100;" on the inline css on the jarallax-container, but I'm sure this is not a good solution and it would have other side-effects (f.ex. if there were content inside the jarallax, it would probably overlap it).

Unmodified:

Modified:

[vhusaruk92]

Agree. I rewrote 'z-index' to z-index: 0 or $(this).css('z-index', 'unset') in my projects to make parallax works fine

[lmuzquiz]

Had the same issue and discovered that after doing:

  <style>
    #jarallax-container-0 {
      z-index: 0 !important;
    }
  </style>

it was indeed being displayed on Microsoft Edge, but on a very weird fashion.

Then i compared my code to the example you have on your jarallax website, and I realized i was calling the image using the style attribute combined with the background-image like this:

<div class="jarallax">
  <img class="jarallax-img" style="background-image: url('assets/img/image.jpg');">
</div>

So i changed my code to call the image using the src attribute, like you are doing on your jarallax demo website:

<div class="jarallax">
  <img class="jarallax-img" src="assets/img/image.jpg" alt="">
</div>

And now it looks better on IE Edge