Hi George. I spent a few hours on this today, and it's a big can-of-worms
. I also did some more tests on your website https://studiocreative.bg/projects/horo/
, and did you notice that when you SCROLL (as little as one pixel), the position corrects itself? This is because the browser corrects the STYLE on some repaint event.
The bug comes from browsers (at least webkit-browsers) when a complex combination of the following happens:
- Main (parent) element fades in (transform) after page load
- Page intro background-attachment is set to "fixed", which does not work inside transformed elements, in this case while the page is animating/transforming, see ref.
- Background image loads into background BEFORE transition is complete (cached). If image loads after transition (un-cached), the issue does not happen because the element will refresh itself correctly after the image loads.
- Browser simply fails to update/repaint the correct style automatically after animation and transform has been removed.
This is ultimately a browser flaw with the order of events on some level. I tried to fix it, but the best I could do was force some refresh event after certain time (at least after page transition), in which case the image would "jump" position on screen. Ugly fix, not worth it.
Luckily, there are a couple of solutions.
1. Block transform-transitions for pages where you have fixed intro's. Go to Page > Advanced > Page CSS and add:
transform: none !important;
This is probably the solution you want to use.
2. Simply disable [x]fixed
position in your page intro settings. This is after all what causes the mismatch of positions and rendering. It's already mentioned in the HELP settings for the "fixed" option":
panel help wrote:Warning!
When using fixed background, position- and size may not work as expected. This is because the browser positions- and scales the background relative to the browser viewport when using fixed attachment. This may be especially noticeable with the sidebar layouts.