Parallax not working correctly in edge
Autor: Ruud Roefs-Wijnen
Visited 2772,
Followers 1,
Udostępniony 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.
Posted on the
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.
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
@ 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?
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. "
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 .
in old Edge has been disabled
in new Edge Chromium it's ok ! ;-)
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
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 ??
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.
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.
(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
.
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.
... try these other examples of mine:
> example 2
> example 3
> example 4
> example 5
.
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
... 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
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?
... 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');
.
Autor
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>
.
Autor
Okay thanks! I will try that.