Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Vue failed to 'Auto-prefixing' ? #1059

Closed
aiden271828 opened this issue May 19, 2021 · 1 comment · Fixed by #1062
Closed

Vue failed to 'Auto-prefixing' ? #1059

aiden271828 opened this issue May 19, 2021 · 1 comment · Fixed by #1062
Assignees
@skirtles-code
Labels
enhancement New feature or request

Comments

@aiden271828
Copy link

aiden271828 commented May 19, 2021 •
edited
Loading

https://v3.vuejs.org/guide/class-and-style.html#auto-prefixing
Vue will automatically detect and add appropriate prefixes to the applied styles .

expected

add prefixes to experimental or nonstandard CSS

DEMO

Chrome 80.0.3987.162

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>

</head>

<body>
    <div id="app">
        <h1 :style="style">hello vue</h1>
    </div>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    style: {
                        transform: 'translate(10px)',
                        'border-image': 'none 100% 1 0 stretch'
                    }
                }
            }
        }).mount('#app')
    </script>
</body>

</html>

RESULTS

<div id="app" data-v-app=""><h1 style="transform: translate(10px); border-image: none 100% 1 0 / 1 / 0 stretch;">hello vue</h1></div>
@skirtles-code
Copy link
Contributor

I believe this is working correctly.

The code to handle this is here:

https://github.com/vuejs/vue-next/blob/f7c54caeb1dac69a26b79c98409e9633a7fe4bd3/packages/runtime-dom/src/modules/style.ts#L67

Prefixes are only added where required. transform and border-image don't require them. Here's an example using text-emphasis, which currently needs a prefix in Chrome and Edge:

https://jsfiddle.net/skirtle/Lb5wqdzp/

I'll make an update to the docs to try to set expectations a bit better.

@skirtles-code skirtles-code self-assigned this May 19, 2021
@skirtles-code skirtles-code added the enhancement New feature or request label May 19, 2021
@skirtles-code skirtles-code mentioned this issue May 20, 2021
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@skirtles-code skirtles-code

Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Elaborate on how style auto-prefixing works skirtles-code/docs-next
2 participants
@aiden271828 @skirtles-code