X3Photo Gallery Forums

GeoPal · 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

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:

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

I am working on a new release, and will take a closer look, but essentially this is a browser bug.

GeoPal · 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)

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.

studioCREATIVE · 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!

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.

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:

.main {
  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.

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.

GeoPal · 02 May 2022, 08:43

Thank you Karl, we will add the code and remove fixed from settings! Thanks once again!

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.

16 Jul 2022, 06:07

This was resolved in X3.31.0.
www.photo.gallery/blog/x3-31-cart-files-breadcrumbs/

X3Photo Gallery Forums

Page intro plugin "scale"11 posts

Page intro plugin "scale"

Re: Page intro plugin "scale"

Re: Page intro plugin "scale"

Re: Page intro plugin "scale"

Re: Page intro plugin "scale"

Re: Page intro plugin "scale"

Re: Page intro plugin "scale"

Re: Page intro plugin "scale"

Re: Page intro plugin "scale"

Re: Page intro plugin "scale"

Re: Page intro plugin "scale"