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

Style binding on SVG shapes breaks at times #12391

Closed
haykkh opened this issue Nov 14, 2024 · 1 comment · Fixed by #12392
Closed

Style binding on SVG shapes breaks at times #12391

haykkh opened this issue Nov 14, 2024 · 1 comment · Fixed by #12392
Labels
has workaround A workaround has been found to avoid the problem 🔩 p2-edge-case scope: compiler

Comments

@haykkh
Copy link

haykkh commented Nov 14, 2024

Vue version

3.4.26

Link to minimal reproduction

https://play.vuejs.org/#eNqVVF1v0zAU/SsXv3QTS9sNOqEsVGJoD/AACHiMxFLnNvHq2JHtpKmm/neunZAOrau0h0j3+5x7outH9qmup22DLGaJ5UbUDiy6pl4ms95dpipVicOqlplD8gCSN1EE2NXIHeYxrEQBBnPgwnCJsBWuBKsrhJVscIha0AqcrqMozBtmZGoHLRorKCkUl00uVAHaQLbSLcK76fvp1TWsDGYbC65EmKyFlLFHm0AYNQyi/lC88LlKt37MxDqjNxhDm5mzKOJaanN+M4G10VUYZt2O6LqseAnhrFHE3MJON5BJq/vZ1OiXS/rFlvb8KJPrGCwpwUtPJUDGAe9jyu7vU0Za9Pjkk7cWHUn0BPuFkeNygYJeB8r/yfw2CrGkWILMdmiej+7phum2Leh35a4kFov5nIiUKIrSjW4rcHurO/LnMAeK+S9lgRv1F4NB5vDzua+9WvhevhtNM1oHEUZCNyTEkR81RKPAL4YPdedlmw3Un2EeIEfES294GLK9RkP7kebLsGzo7s1Xth/Ae/N17UflOtGezHrd6UJbbyWz8TrZBXOWa7UWxfTBakVX/ehLU8Z1VQuJ5nvt6NpsymIIGZ/LpNTbryHmTIMX/+K8RL45En+wnY+l7IdBi6YlcmPOZaZA16fvfn3DjuwxWem8kVR9IvkTrZaN59iX3TYqJ9pP6gLbL1WtjaNL+G3vOofKPyEjUV+5D/Upo6ft84nVD3TpxEJfqvak4p/hWSIB+9tj+78ArphI

Steps to reproduce

  • any version including or above 3.4.26 breaks the fill: red
  • on 3.4.25: removing stroke: var(--color); from the style tag breaks thefill: red (unless you also remove some <circle>s)
  • on 3.4.26: switching from :style="``" to style="" fixes fill: red
  • on 3.4.26: removing some of the blue circles +- the <g> layer fixes fill: red

What is expected?

big red circle with some blue circles on top

Screenshot 2024-11-14 at 11 54 04

What is actually happening?

big black circle with some blue circles on top

Screenshot 2024-11-14 at 11 54 15

System Info

No response

Any additional comments?

No response
@edison1105 edison1105 added scope: compiler has workaround A workaround has been found to avoid the problem 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. labels Nov 14, 2024
@edison1105 edison1105 mentioned this issue Nov 14, 2024
Merged
@edison1105 edison1105 added 🔩 p2-edge-case and removed 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. labels Nov 14, 2024
@edison1105
Copy link
Member

edison1105 commented Nov 14, 2024 •
edited
Loading

The issue is caused by this commit: 09b4df8. Before version 3.4.25, :style="`xxx`" would not be stringified. In version 3.4.26, it is being stringified, but stringifyStyle returns an empty string.

noootwo pushed a commit to noootwo/core that referenced this issue Nov 15, 2024
@edison1105 @noootwo
fix(compiler-dom): properly stringify template string style (vuejs#12392
6a4179a 
)

close vuejs#12391
@github-actions github-actions bot locked and limited conversation to collaborators Nov 30, 2024
abdullah-wn pushed a commit to Lazy-work/vue that referenced this issue Jan 4, 2025
@edison1105 @abdullah-wn
fix(compiler-dom): properly stringify template string style (vuejs#12392
bccc723 
)

close vuejs#12391
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
has workaround A workaround has been found to avoid the problem 🔩 p2-edge-case scope: compiler
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(compiler-dom): properly stringify template string style vuejs/core
2 participants
@edison1105 @haykkh