Jump to content

Custom CSS: Trying to use calc() inside a gradient breaks editor view

Recommended Posts

I have a bit of a large calc function inside a background linear gradient. Originally the calc function seemed to be computed incorrectly and after some digging I found that I needed to escape it in the custom CSS.

I finally managed to get the gradient I wanted with the following line, but now the editor view is broken as a result.

The offending line:

background: linear-gradient(
  to right,
  #B1B5B7,
  #B1B5B7 calc(~"((100% - 1350px) / 2.0) + 877px"),
  #7DA57E calc(~"((100% - 1350px) / 2.0) + 877px"),
  #7DA57E);

A couple of errors show up in the console:

error-reporter-b1a003a2d08ddc2bf6213-min.en-US.js:14 Unhandled Promise rejection: Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings. ; Zone: <root> ; Task: Promise.then ; Value: Error: Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.
80982-82074d37f31ce71d02b63-min.en-US.js:9 Uncaught TypeError: a is not a function

 

EDIT: Just noting this is on Squarespace v7.0

Edited by AleksandarArsovski
Link to comment

When I've worked around calc issues in Custom CSS I've used a format like the following.

max-width : ~"calc( 20vw + 134px )";

The errors you show appear to be related to JavaScript or other code issues. I've never seen CSS errors reported in the console.

Is the Custom CSS dialog itself reporting a syntax error?

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

@creedon placing the quotes around the calc() like you described produces the same result unfortunately. It works for the gradient, but breaks the editor.

I don't really know how the LESS compiler works so I'm wondering if it is causing some b0rky syntax?

The Custom CSS dialog is pulled out from a separate tab that was open on another page, the errors I've shared in my post are from the page that the CSS targets.

EDIT: Just noting that removing the background line or changing the background line to a percentage instead of the calc() function also fixes the error.

Edited by AleksandarArsovski
adding context
Link to comment

Try something like the following.

#block-63687c17a3503508c35cb946 {

  background : ~"linear-gradient( to right, #B1B5B7, #B1B5B7 calc( ( ( 100% - 1350px ) / 2.0 ) + 877px ), #7DA57E calc( ( ( 100% - 1350px ) / 2.0 ) + 877px ), #7DA57E )";
  
  }

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

That seemed promising as one of the sections seemed editable after I saved (this code is for an index page), but I realized all the other sections were still broken.

Interestingly, only the second JS console error seemed to come up this time.

I've decided to take the design a different direction as I realized that I'd need a whole different formula for calculating the gradient on mobile sizes that would prove to be even more of a headache, but this has been a curious error and I would love to figure out what caused it.

Link to comment
54 minutes ago, AleksandarArsovski said:

but this has been a curious error and I would love to figure out what caused it.

I suspect the error stems from SS using an ancient version (1.3.3) of LESS. We've seen similar issues before with calc. CSS continued to evolve after LESS v1.3.3 was created and so LESS v1.3.3 chokes on more modern CSS.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
19 minutes ago, creedon said:

I suspect the error stems from SS using an ancient version (1.3.3) of LESS. We've seen similar issues before with calc. CSS continued to evolve after LESS v1.3.3 was created and so LESS v1.3.3 chokes on more modern CSS.

Oh that would make sense. I was looking at some support boards for v1.4.0 of LESS and that one already seemed a little on the older side.

In any case, thanks for your help! I'll probably avoid any complex calc functions for now.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.