`fit-content` is not correctly prefixed in inline-style
Version
3.2.4
Reproduction link
Steps to reproduce
Include fit-content in inline-style for any sizing property like height.
What is expected?
-moz-fit-content is used for Firefox.
What is actually happening?
Property is completely omitted in Firefox.
Vue / its compiler doesn't do autoprefixing. This is the responsibility of the css tooling you choose in your build setup, i.e. postcss-loader + autoprefixer plugin with webpack.
@LinusBorg I think he's referring to https://v3.vuejs.org/guide/class-and-style.html#auto-prefixing.
For example this version works
Oh. I was honestly unaware we do this in Vue 3. Apologies ^^
The catch is that this issue is a static inline style="height: fit-content", whereas my understanding is that Vue performs some style auto-prefixing in bound values only: :style="{ height: 'fit-content' }".
At least that's what the docs seem to say, and doing the former would be expensive as it would defeat the static hoisting.
The catch is that this issue is a static inline
style="height: fit-content", whereas my understanding is that Vue performs some style auto-prefixing in bound values only::style="{ height: 'fit-content' }".
If this is the case, I'd expect this modified playground to work in Firefox.
For example this version works
Thanks for the workaround!
Vue only prefixes property names. fit-content is a property value. Unfortunately I don't think there is a way to automatically detect values that need prefixing at runtimes.
Btw re @jods4 's comment - static string style bindings are in fact pre-compiled into constant objects so they work the same with object bindings.