WebSite X5Help Center

 
Ruud Roefs-Wijnen
Ruud Roefs-Wijnen
User

Parallax not working correctly in edge  en

Autor: Ruud Roefs-Wijnen
Visitado 2667, Seguidores 1, Compartilhado 0  

In post 210334 I saw the explanation from Incomedia about the parallax not working correctly in Edge. But this explanation is from 04-05-2019 regarding the version v2019.1.6.

Now I have already the version v2019.3.14 but the parallax is still not working correctly. Also in Safari it is not always working as it should. Sometimes it does, but sometimes it does not.

Can I expect an update of the program, so that the parallax will work correctly in all browsers?

You can find my test website (still working on it) here www.fawltyandjones.nl/test.

Publicado em
19 RESPOSTAS - 2 ÚTEIS
Aleksej H.
Aleksej H.
Moderator

Hello.I looked at your site in Mozilla Firefox 73.0.1, Opera 66.0.3515.103, Google Chrome 80.0.3987.116, Microsoft Edge 80.0.361.57. Parallax works the same everywhere.

Ler mais
Publicado em de Aleksej H.
Ruud Roefs-Wijnen
Ruud Roefs-Wijnen
User
Autor

Hi Aleksej.

Thank you for your respons. But on my computer it does not work on Edge. I have Microsoft Edge  44.18362.449.0. Also on my IPhone the pictures are fixed. In Chrome, Mozilla and on the IPad it works.

Regards, Ruud

Ler mais
Publicado em de Ruud Roefs-Wijnen
Sinisa B.
Sinisa B.
User

@ Ruud

I have read somewhere that parallax effect is automatically disabled in mobile phone view - so the older phones could load & see the page... Maybe this feature is embedded in the WSX5 code too?

Ler mais
Publicado em de Sinisa B.
Claudio D.
Claudio D.
Moderator
Usuário do mês IT

Ciao !

ho posto proprio qualche giorno fa, la stessa domanda allo STAFF.
Ecco la risposta dello STAFF:

"1_ Parallax n ° 1: l'effetto è stato migliorato ma disabilitato sia per Edge che per IE, poiché il risultato non era abbastanza soddisfacente e poteva causare uno sfarfallio maggiore su entrambi i browser.

2_ Parallax n ° 2: l'effetto è stato leggermente migliorato, ma già funzionava bene prima

3_ Parallax n ° 3: l'effetto è stato migliorato in particolare per Edge e ora dovrebbe funzionare perfettamente. L'effetto è stato rimosso in IE dal momento che il risultato non era abbastanza soddisfacente e potrebbe causare sfarfallamenti importanti sul browser

La scelta di disabilitare la parallasse per Edge e IE o per IE solo in quelle particolari circostanze deriva dal fatto che, contrariamente a prima, è ora possibile attivare l'effetto e far sì che la maggior parte degli utenti del browser ne apprezzi l'effetto senza danneggiare gli altri."

PS: nel nuovo Edge Chromium funziona perfettamente

in new Edge Chromium it's OK !

---

ita-->En

Hi !

I asked the STAFF the same question a few days ago.

Here is STAFF's answer:

"1_ Parallax n ° 1: the effect has been improved but disabled for both Edge and IE, since the result was not satisfactory enough and could cause greater flicker on both browsers.

2_ Parallax n ° 2: the effect has been slightly improved, but it was already working well before

3_ Parallax n ° 3: the effect has been improved in particular for Edge and now it should work perfectly. The effect has been removed in IE since the result was not satisfactory enough and could cause major flickering on the browser

The choice to disable the parallax for Edge and IE or for IE only in those particular circumstances derives from the fact that, contrary to before, it is now possible to activate the effect and make the majority of browser users appreciate its effect without harming others. "

Ler mais
Publicado em de Claudio D.
Ruud Roefs-Wijnen
Ruud Roefs-Wijnen
User
Autor

Thank you Claudio for your respons! It's a shame that parallax no. 1 has been disabled for Edge. But at least now I know why. Hopefully you can find a solution for the near future laughing.

Ler mais
Publicado em de Ruud Roefs-Wijnen
Claudio D.
Claudio D.
Moderator
Usuário do mês IT
Ruud Roefs-Wijnen
Thank you Claudio for your respons! It's a shame that parallax no. 1 has been disabled for Edge.

in old Edge has been disabled

in new Edge Chromium it's ok ! ;-)

Ruud Roefs-Wijnen

 Hopefully you can find a solution for the near future

i'm a user like you. i'm not a member of the STAFF Incomedia.

And the future of Edge is Edge Chromium wink

Ler mais
Publicado em de Claudio D.
Ruud Roefs-Wijnen
Ruud Roefs-Wijnen
User
Autor

So now I tried parallax no. 3. This should work perfectly. But unfortunately it is not. It works correct on Edge, Chrome and Mozilla. But on Safari it is a mess.

I put the picture in the center. But on Safari only the far top of the picture is shown. And it scrolls together with the page (see attached picture from my IPad). While it should be fixed in the background. Am I doing something wrong? 

Or maybe it is better just to skip this complete parallax thing. But, in this case, why is it in the program, when it is not working correctly on all the browsers. Aspecially on those who are used the most, Edge and Safari ??

Ler mais
Publicado em de Ruud Roefs-Wijnen
Ruud Roefs-Wijnen
Ruud Roefs-Wijnen
User
Autor

By the way, on the IPhone 11 the picture is also fixed (so it scrolls together with the page), but it is shown correctly. See attached.

Ler mais
Publicado em de Ruud Roefs-Wijnen
Ruud Roefs-Wijnen
Ruud Roefs-Wijnen
User
Autor

In the meantime I tried a few things. But, unfortunately, nothing is working on all the browsers. I tried (on the -Onze Honden in huis- page, https://www.fawltyandjones.nl/test/in-huis.html) to put a picture on the background in Page Properties - Grafic, see attached. This works on Edge, Chrome and Mozilla but not in Safari on the IPad and IPhone. The image is not getting resized. It depends on how much text you have on the page, how big the picture on the background gets.

I had the same problem in my old project (which is still on line now). Which I asked help for in 2017, post number 164341. But then Claudio D. told me he could not help me, because I had wrong html codes in it. Now I am having the same problem, with a new project in which are no customer html codes. The problem exists only on the mobile devices.

So now I tried all the possibilities for having a picture on the background fixed or not. But nothing works on all the browsers/devices. So maybe you can give me a solution for getting a picture on the background of each page. I want to have a different background picture on each page.

Ler mais
Publicado em de Ruud Roefs-Wijnen
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Ruud Roefs-Wijnen
In the meantime I tried a few things. But, unfortunately, nothing is working on all the browsers. I tried (on the -Onze Honden in huis- page, https://www.fawltyandjones.nl/test/in-huis.html) to put a picture on the background in Page Properties - Grafic, see attached. This works on Edge, Chrome and Mozilla but not in Safari on the IPad and IPhone. ... ... ... ... ... 

(It > En ) ... ... if this > my invention  (among some of my experiments)  works on your devices i(!), then you can use it in your Project ...
... possibly, and if you are interested,   notify me if you want to know more and how to incorporate it into the Project... (it's simple and easy)...

hello, ciao

.

Ler mais
Publicado em de  ‪ KolAsim ‪ ‪
Ruud Roefs-Wijnen
Ruud Roefs-Wijnen
User
Autor

@ KolAsim

I took a look at your invention. But on the IPad and IPhone the picture is not fixed in the background. It is scrolling together with the rest of the page. On Edge it works just fine.

But maybe you can tell me how did you do that, so I can try it in my own project.

Ler mais
Publicado em de Ruud Roefs-Wijnen
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Ruud Roefs-Wijnen
... ... ... But on the IPad and IPhone the picture is not fixed in the background. ... ... ...

... try these other examples of mine:
> example 2
> example 3
> example 4

> example 5   

.

Ler mais
Publicado em de  ‪ KolAsim ‪ ‪
Ruud Roefs-Wijnen
Ruud Roefs-Wijnen
User
Autor

Hi KolAsim,

Example 2 and example 3 are working on all the browsers. Also on Safari! On the IPhone the picture resizes a bit during scrolling, but that is not disturbing that much.

So I am curious, how did you do that??

Kind regards, Ruud

Ler mais
Publicado em de Ruud Roefs-Wijnen
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... for the "in-huis.html" page paste the following code in this position:
>> Step 3 - Map > The Page Properties window > ▪Expert | ▪Custom Code: (5°)  >▼After opening the BODY tag
... code:
<div id="contenitoreK" style="position:fixed;top:0px;width: 100%;height: 100%;z-index:-1;">
<div id="div_customK" style="position:absolute; top:0px;width: 100%;height: 100%;z-index:-1; background-repeat: no-repeat;
background-image: url('https://www.fawltyandjones.nl/test/images/queeny-en-motion-2500x1800.jpg');
-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;
background-size: cover;background-position: center center;">
</div>
</div>
<script> document.getElementById("imPageExtContainer").style.backgroundImage = "url('')"; </script>

.

ciao

Ler mais
Publicado em de  ‪ KolAsim ‪ ‪
Ruud Roefs-Wijnen
Ruud Roefs-Wijnen
User
Autor

But, do I understand this correctly? When I put this on each page into my project in the test environment, I am able to check if everything looks the way I want to. But when I finish the project, and I want to place it in the correct url (www.fawltyandjones.nl), then I have to change all the url's (on each page) of the backgroundimages manually. This will not change automatically?

Ler mais
Publicado em de Ruud Roefs-Wijnen
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... step 3 is relative to each single page, therefore each page must have the same style and its dedicated script, and the URL of the image must be replaced with the relative one ...

background-image: url('images/nameimge.jpg');

.

Ler mais
Publicado em de  ‪ KolAsim ‪ ‪
Ruud Roefs-Wijnen
Ruud Roefs-Wijnen
User
Autor

Thanks for your time smile

Ler mais
Publicado em de Ruud Roefs-Wijnen
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Ruud Roefs-Wijnen
Thanks for your time

... ... try this code, which should automatically replace the image:

<div id="contenitoreK" style="position:fixed;top:0px;width: 100%;height: 100%;z-index:-1;">
<div id="div_customK" style="position: absolute; top: 0px; width: 100%; height: 100%; z-index: -1; background-repeat: no-repeat; background-image: url(''); background-size: cover; background-position: center center;">
</div>
</div>
<script>
imagebgK = $("#imPageExtContainer").css('background-image');
$("#div_customK").css("background-image", ''+imagebgK+'' );
$("#imPageExtContainer").css("background-image", "url('')" );
</script>

.

Ler mais
Publicado em de  ‪ KolAsim ‪ ‪
Ruud Roefs-Wijnen
Ruud Roefs-Wijnen
User
Autor

Okay thanks! I will try that.

Ler mais
Publicado em de Ruud Roefs-Wijnen