Box shadows on Image elements created in Pro 3 – RC4

Beta
#1

In Pro 3, I styled some Image elements to add a box shadow. I left the Interaction box shadow color set to the default Transparent because there was no interaction for these particular images (I wasn’t using them as links).

image

They work as expected in Pro 3. (Hovering over the image doesn’t change the shadow)

However, upgrading to RC4, whenever I hover over those elements, they animate between the two box shadow states – even though I still haven’t set up any sort of interaction for the element itself.

I know I can just link the two box shadow colors using the little link button, but it’s a bit unexpected that the shadows started behaving differently after updating.

(I haven’t looked at other elements in quite the same way, so I’m not sure if this is exclusive to Image elements or not)

#2

Thanks Devin! We’ll take a closer look at this one.

#3

Hi @devinelston,

We checked into this and it’s a bit of a tricky situation. There was a bug in Pro 3 where the box shadow interaction color was not being applied unless you enabled the Image as link. That means any box shadows would still be storing transparent as the interactive color, but it wasn’t applying on the front end… We inadvertently fixed that bug because when we built the effects system with the ability to link child interactions we rewrote how all interaction styles worked under the hood. So by fixing that bug and actually setting the interaction color, we end up creating a visual discrepancy between version 3 and 4. We’ve talked this through and regretfully there isn’t a way to get around it without making the Image element behave differently and disabling the ability to set an interaction box color unless it is enabled as a link. We don’t think this is a good idea because with this update you might want to move your link up to a Column or Div perhaps.

We’re going to leave it for now and add some info to the release notes.

1 Like