Search…

X3 Photo Gallery Support Forums

Search…
 
User avatar
GeoPal
Experienced
Topic Author
Posts: 224
Joined: 20 Dec 2007, 12:56

Page intro plugin "scale"

12 Apr 2022, 03:34

Hello Karl,
In one of our websites we see a strange /to us/ behaviour of the intro image plugin.
When you open the main page of https://studiocreative.bg/ and then you navigate to ПРОЕКТИ (projects), and then enter any of the subholders, you get the intro image cut from above. If you scroll down or hit refresh while you are in the same subfolder, the intro image is positioned correctly.
I am using Chrome Version 100.0.4896.88 (Official Build) (64-bit) on Windows 10.
I have also recorded a small video which shows the glitch.
https://studiocreative.bg/work/sc_demo.mkv
We "think" that the problem comes from "Background Position [x, y]" setting in the page intro plugin, as we set it custom to 70%70% let's say and you get the issue, if it is 50%50% we don't have this issue, but the image doesn't look the way we want it.

Thank you very much for any hints,
Kind regards, G
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13399
Joined: 30 Sep 2006, 03:37

Re: Page intro plugin "scale"

12 Apr 2022, 04:19

I can confirm the issue in Chrome, but no problem in Safari and Firefox, and no problem in Chrome when using "incognito" window or Chrome "devtools" open. It seems this is a Chrome bug with CSS background-position when the image loads too fast (is cached in browser).

Incorrect layout, but correct CSS:
Image

Toggle checkbox for the background-position OFF/ON, and it corrects itself:Image

I am working on a new release, and will take a closer look, but essentially this is a browser bug.
 
User avatar
GeoPal
Experienced
Topic Author
Posts: 224
Joined: 20 Dec 2007, 12:56

Re: Page intro plugin "scale"

12 Apr 2022, 04:32

Thank you Karl, hope you can find a workaround if you think it will be better, not sure if Chrome developers are aware of this bug and will ever fix it.
Thanks once again for your time!
Kind regards, G
p.s. we have the same problem in Incognito mode as well...
Also has the same behaviour in MS Edge (not that I use that browser, just have it)
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13399
Joined: 30 Sep 2006, 03:37

Re: Page intro plugin "scale"

12 Apr 2022, 06:22

GeoPal wrote:p.s. we have the same problem in Incognito mode as well...
I can also recreate it in Incognito, but only after the page+image has been loaded once first (in which case it first appears correct). Clearly cache related, or how fast the background image loads into the element.
 
User avatar
studioCREATIVE
Posts: 5
Joined: 18 Nov 2014, 16:31

Re: Page intro plugin "scale"

13 Apr 2022, 10:19

Hello Karl, on Windows this issue is also detected on Edge, Brave and Opera and only on Mozilla there is a little "jump" on loading but at the end it shows correctly. Is there any workaround? Thanks, K!
https://studiocreative.bg
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13399
Joined: 30 Sep 2006, 03:37

Re: Page intro plugin "scale"

13 Apr 2022, 10:38

"Workaround", possibly by forcing some reflow on the element by Javascript after xx milliseconds, but likely this would cause some "jump". I will look into it for next release.
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13399
Joined: 30 Sep 2006, 03:37

Re: Page intro plugin "scale"

20 Apr 2022, 04:02

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.

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

Solution
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:
Code
.main {
  transform: none !important;
}
Image
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.
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13399
Joined: 30 Sep 2006, 03:37

Re: Page intro plugin "scale"

20 Apr 2022, 05:21

mjau-mjau wrote:1. Block transform-transitions for pages where you have fixed intro's.
This is now implemented into new pending X3 release. If loaded page has image-intro set to "fixed", only opacity will be used in transition fade in. A fix I would have liked to avoid, but a fix nevertheless.
 
User avatar
GeoPal
Experienced
Topic Author
Posts: 224
Joined: 20 Dec 2007, 12:56

Re: Page intro plugin "scale"

02 May 2022, 08:43

Thank you Karl, we will add the code and remove fixed from settings! Thanks once again!
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13399
Joined: 30 Sep 2006, 03:37

Re: Page intro plugin "scale"

02 May 2022, 10:37

GeoPal wrote: Thank you Karl, we will add the code and remove fixed from settings! Thanks once again!
You only need to add the code OR remove "fixed" from setting. You don't need to do both.
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13399
Joined: 30 Sep 2006, 03:37

Re: Page intro plugin "scale"

16 Jul 2022, 06:07