came up with our own temporary fix

#es .es-media-header-affix-wrapper.affix {

  position: static;

  border: 0;

  background-color: #f5f5f5;

  border-radius: 8px;

}

Hello,

You can define the album header position at EasySocial > Settings > Photos > Layout > Photos Actions Header , so that it won't overlap your template toolbar.

https://take.ms/EGbAf

we tried changing the offset, it did not help there still seems to be an issue with z-index it seems like an issue with easysocial or the pixel template.

Hello,

You just need to define the position should be enough, no need to updated the z-index and position: static.

pixel template with position: 60px https://take.ms/jObPQ

Sorry,

For Pixel template 80px should be enough https://take.ms/51Xx0

in your video it looks like the album toolbar sits above the photos until you scroll then it pops up to the top.

ours does not do that, it immediately pops to the top. then when you scroll instead of sticking to the top of the screen it goes behind elements, the 80px did help but its not a great fix for the issue we are experiencing

https://monosnap.com/file/e8mymLuj49S471nX3WIcJj0bTMp48U

Hi,

As I replied in a previous post, your customization causing the position misaligned https://take.ms/rpT75 . And the Photos Actions Header position is base on your template have enabled the sticky header or not https://take.ms/5bBmvA . I have checked your site disabled sticky header so your Photos Actions Header should be set to 0.

i only added that customization because the Photos action menu floats to the top behind the main menu, you can see how ugly this is in my original post. it is not useable.

let me be clear i do NOT want to have that customization, i only added it because the photos action menu is broken with the pixel template.

regarding the sticky menu, the option you show in your screenshot is NOT for the photo action menu that I'm referring to, it's for the pixel main menu, we do not want that sticky which is why it's turned off.

in your video demonstrating the expected behavior of the photo action menu, the photo action menu appears to have a sticky feature when scrolling which we do not experience.

something is broken with easy social 4 photo action menu when used with the pixel template.

i would love to remove my customization if the menu worked like yours works in your video.

in your video it looks like your testing with a different template than pixel.

Hi,

It seem some JS causing the Photos Actions Header not working and we found out your site is using caching services, in order to debug you will need to disable Cloudflare services.

https://take.ms/3vmsD

cloudflare has been put into dev mode, your right it does appear to be some js issue, it works properly on the dev site, i wonder if admintools is interfering with it?

which file is responsible for adding the affix css on scroll, i suspect that might be getting blocked?

it seems like cloud flares rocket loader is the cause of the broken album menu. Here is a link about what it does https://support.cloudflare.com/hc/en-us/articles/200168056-What-does-Rocket-Loader-do-

Hello,

Yes, it seems Cloudflare rocket loader script will affect the rendering causing the album menu misaligned. This is beyond our control. To fix this maybe you can try to exclude Rocket Loader for album page.

e.g.: anara.farm/albums/*

https://support.cloudflare.com/hc/en-us/articles/200169436-How-can-I-have-Rocket-Loader-ignore-specific-JavaScripts-

https://support.cloudflare.com/hc/en-us/articles/218411427-Is-there-a-tutorial-for-Page-Rules-

I've been experimenting with the page rules, it seems like there are too many variations to use page rules effectively, events, pages, groups etc... it's easier to just turn off rocket loader for now.

Im wondering though if you can add an option or guide me where to add the code from these instructions https://support.cloudflare.com/hc/en-us/articles/200169436-How-can-I-have-Rocket-Loader-ignore-specific-JavaScripts

<script data-cfasync="false" src="/javascript.js"></script>

It seems like the issue with rocketloader is that it's triggering a race condition when adding the affix wrapper to the album action menu because rocketloader simply moves all javascript to the end of the page, is the issue out of your control because it's caused by a 3rd party library such as bootstrap? if so I'm happy to work with the 3rd party on a solution if you can guide me who is responsible.

Hello Greg,

We'll try to see if we can add this as a settings in the next version but temporarily what you can do is to edit the file /administrator/components/com_easysocial/includes/scripts/scripts.php and search for the method createScriptTag

$script = '<script' . (($this->defer) ? ' defer' : '') . (($this->async) ? ' async' : '') . ' src="' . $path . '"></script>';

Change it to:

$script = '<script data-cfasync="false"' . (($this->defer) ? ' defer' : '') . (($this->async) ? ' async' : '') . ' src="' . $path . '"></script>';

It didn't work, I attached a screenshot of the error. It seems like such a harmless data tag, I guess its messing with the loading order a bit too much.

Hm, when I viewed the source of the page, I do not see those changes.

I had to remove the change it was breaking too much

Can I try to apply this on the site?

sure, Ill turn on Cloudflare rocketloader for a bit so you can test

Sure, let me know when you are reeady

now is fine

Okay, I see the issue now. I have even tried replacing all the script tags generated by EasySocial and adding the data-cfasync attribute and it still is problematic because I believe Cloudflare's Rocket loader is also doing something to the way they deliver HTML on the page.

It seems like they are deferring some stuffs and the script fails because of the race conditions.

Thats a shame, I had high hopes you would find a solution...