CSS gradient disables editing?

Hello!

Has anyone encountered problems with CSS gradients with percentage values disabling the Squarespace page edit buttons? As soon as I add percentage values I can no longer edit the pages – the edit buttons won't show up. Double-clicking the content (which usually enables the editing) won't work either.

To replicate the problem, try this in the Custom CSS...

.Footer {
background-image: linear-gradient(135deg, #ece54c 0%, #46bdcf 75%);
}

Going back to Pages and reloading the site will stop the edit buttons from appearing.

Removing the percentage values like below will solve the issue...

.Footer {
background-image: linear-gradient(135deg, #ece54c, #46bdcf);
}

Adding a linear gradient with percentage values to text doesn't seem to cause a problem.

p { 
  border: none !important;
  background-image: linear-gradient(135deg, #ece54c 0%, #46bdcf 75%);
}

 Does anyone have an explanation for this? Is this a bug or did I miss something?

Thanks!

Can you share link to your site? We can check easier.

On 6/9/2020 at 2:00 PM, tuanphan said:

Can you share link to your site? We can check easier.

I have since made changes to the site so I doubt it will help you, but sure!
It's this one (password: herz). Using the Rally template (Brine family).

I just successfully replicated the bug – create a new site using the Rally template and paste this into the Custom CSS...

/** Footer **/
.Footer {
  background: linear-gradient(-45deg, #ece54c 0%, #46bdcf 75%);
}

Save and refresh the page. The edit buttons should no longer show up. They will show up when you remove the percentage values from the code.

------

Another thing I'm currently trying to figure out on the beherzt Website (password: herz) is how to use a :hover on a parallax item. See I'm using a clip-path to change the appearance of pages with banners on the site...

.Parallax-host-outer .Parallax-host .Parallax-item:not(:first-child) {
    clip-path: polygon(
    0 6vw,
    100% 0,
    100% calc(~"100% - 6vw"), 
    0 100%
  );
  -webkit-clip-path: polygon(
    0 6vw,
    100% 0,
    100% calc(~"100% - 6vw"), 
    0 100%
  );
}

Can I somehow use a :hover effect on this? I want to change the clip-path so that it reverts back to a rectangle. It works nicely on pages that have no banner image and the Footer but I can't make it work with pages with banners.
 

Thanks for your help tuanphan!

Use this code

body:not(.sqs-edit-mode) .Footer {
  background: linear-gradient(-45deg, #ece54c 0%, #46bdcf 75%);
}

Hey @Rammy

I thought I was going mad yesterday and it took me all day to work this out. The same happening to me after I added the ghost plugin for the Gradient Index Image Background. I would love to use this gradient effect (for index banners) so I'm wondering if you worked out a fix?

Cheers.
Claire.

Here's the code that I used
https://www.ghostplugins.com/steps/3og8ehny

SOLVED!!!

@tuanphan was able to help me with this problem.

We added this code (viewable in live mode only)
body:not(.sqs-edit-mode) .Index-page--has-image .Index-page-content {
  background: linear-gradient(-100deg, transparent 20%, #881223 90%, #a81b30 100%);
}

Amazing help, thanks!
Claire.