[BUG?] CSS transform with <IMG> tags

, , ,

Hello everyone. I enabled CSSNextSupport and noticed that the CSS property transform: rotate() doesn’t work with <img> tags. If applied to the parent, for example a <div> , the block rotates, but the child <img> stays in place. Other parameters like scale() , skew() , etc., don’t work either. Only translate() works, but not translateZ . Is this a bug or a feature? lol

I thought none of the transform features were supported :thinking: I could use rotation. Need to check…

Edit: Just tested transform: rotate(45deg) on a div and a label - still doasn’t work :man_shrugging: Even with enabled CSS feature flags introduced in UXP v8.0.1

Edit 2: It doesn’t work if label is in a sp-action-button, but kinda works, if it’s just in a regular div. Kinda, because when rotated, text inside it disappears, so pretty much useless (at least in my case)

I’ll ping @Erin_Finnegan to forward this to someone hopefully. It seem yet again the feature is added, but pretty much unusable (see also my edits in the previous post)

UXP does not support CSS transform on <img> tag.

Not all the CSS functions/properties are supported in UXP.
UXP supports CSS translate(), translateX(), translateY(), rotate(), scaleX(), scaleY(), scale() functions and translate property.

Not all the UI elements supports CSS transform.
Only Border, Outline, Color background, shadow and SVG support CSS transform now.

It’s because we prioritize developing only features that are needed upon requests.

It feels like Adobe is manually recreating CSS from scratch in assembler. They add each property with blood and sweat. :grinning:

Could you please explain what that means? What does it work on, when whole UI is just tags and nothing else? Or by tag you mean something different than HTML tag?


For now I personally am most interested in rotate() and that’s what I will focus on. As mentioned before, it doesn’t really work. How it works, is useless. After rotating a <label>, the text inside it simply disappears. Or is <label> just another tag on which it won’t work? If so, then same question - what does it work on?


What does that mean? How do you rotate a background color or a border? I honestly don’t understand what’s the purpose of the transformation in these cases…


Absolutely does not look like that’s the case. Some features are requested for years and still not here. The ones that are seemingly here, don’t work. Especially the UI stuff - since UXP release nobody cares much. I mentioned this before - most of actual bugs are scrubbed under the Known Issues and forgotten


Not just CSS, but the whole browser. It was discussed multiple times before with no reaction from Adobe team. Instead of taking a normal browser and stripping it down by removing or limiting some features, it seems, as you say, they are building their own from scratch by copy-pasting from existing browsers and trying to glue up a new one. That’s really disappointing to see, when UXP is praised as the future, while still being years in the past :disappointed:

1 Like