Skip to content

Inline style binding is NOT corporate with web standard #10946

Open
@haochenli

Description

@haochenli

Version

2.6.11

Reproduction link

https://codesandbox.io/s/thirsty-heisenberg-elvz6?fontsize=14&hidenavigation=1&theme=dark

Steps to reproduce

  1. open the repo
  2. check the style of the green box

What is expected?

The green div's height should be 101px

What is actually happening?

the green div's height is 22px, cause inline style didn't work on this component


I check the web standard that if I assigned a string to a node's style with either "node.style.cssText" or add style directly in devtools with this "height: 100px; height:" , the final height will be 100px. Obviously the invalid "height: " will be abandoned.
Then I check the source code and find that the function parseStyleText only uses regex to split the string and then assign it to result from value by value, no matter what the value is or if the value is valid. That is why the green box's height is incorrect.
Then I create a PR try to fix this issue in web rendering but not in SSR.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions