CSS "transform: scale(X)" does not save in DAWN editor

Store Design
1

Hi ppl,

trying to zoom images on hover using this css snippet:

.image-with-text__media {
transition: all 0.3s !important;
}
.image-with-text__media:hover {
transform: scale(1.1) !important;
}

The preview does exactly what I want (zoom on hover), but whenever I try to save the custom CSS I get the error “Online Store editor session can’t be published”. The problem is definitely caused by the scale command as it saves as soon as that bit is deleted. Is this a bug or why does shopify not support this command?

A work around is:

.image-with-text__media {
transition: all 0.3s !important;
}
.image-with-text__media:hover {
width: 110%;

height: 110%;
}

But this ends up being a weird animation, first extending the width and then the height dimension, not the smooth transition as by using scale command.

I am using the new feature “Custom CSS” in the theme editor and did not try to add this code to any specific files as all other custom CSS commands worked just fine using the custom css field for multiple other sections.

2

The issue you’re experiencing with the transform: scale property in your custom CSS code is likely due to the limitations of the Online Store editor in Shopify. The editor may have restrictions on certain CSS properties or values to ensure compatibility and prevent potential conflicts with the theme’s structure or functionality.

While it can be frustrating that the transform: scale property is not working as expected, you can still achieve the desired zoom effect using alternative CSS properties. One option is to modify the width and height properties as you’ve mentioned in your workaround. However, to create a smoother transition, you can use CSS transitions on the width and height properties individually. Here’s an example:

.image-with-text__media {
  transition: width 0.3s, height 0.3s !important;
}

.image-with-text__media:hover {
  width: 110% !important;
  height: 110% !important;
}