Gissues: Style binding silently omitting number values for size related styles

toyknight

Jul 29th 2023

Vue version

3.3.4

Link to minimal reproduction

https://play.vuejs.org/#eNp9UU1PAjEQ/StjPawmCBo8bRYSJSTqQY2aeOll7Q5Lods2bRcwm/3vTktAD4Zb30dn3st07M7a4aZFlrPCCydtAI+htVOuZWONC9CBwwX0sHCmgYysGddcC6N9gMbXMIn6RfaAShn4NE5VZ9kl18VoP44GEQjYWFUGJARQLG+mXZc+930xIpRYqW0bYHPVmArVhDPSOYPch2+FBDvYyiosc7i9HsBXKda1M62uZkYZl0N2LoTIoOeMhhWj4z42YMFT2IWshytvNPXs4jbOhGmsVOhebJBUhrMckhK1krpsnxIXXIuDAy+WKNb/8Cu/ixxnrw49ug1ydtRC6WoMe3n+/ow7eh9F6toqcp8Q39Ab1caMe9s9labYf3wp7WO6ltT1h5/vAmp/KBWDRmef/JzRBWcnqv/GHQ/H6R/XPet/AOTUtlQ=

Steps to reproduce

Specify <!DOCTYPE html> (HTML5) in index.html.
Try to bind width using a number without specifying measurement (e.g. px).

What is expected?

The width style is omitted but I get a warning log.

What is actually happening?

No warning at all.

System Info

No response

Any additional comments?

Size related styles (width, height, fontSize, etc) without measurement actually works correctly when not specifying <!DOCTYPE html> (quirk mode), so this could be very confusing when someone adds back the missing doc type in the middle of development.

edison1105

Jul 31st 2023

This is not what Vue should do. It's 2023, and developers should always include <!DOCTYPE html> declaration to ensure the document parses according to the specification.

toyknight

Aug 1st 2023

If it is not omitted then the inspector will tell you it is an invalid value, so you know what's wrong. If it is omitted then people will likely wonder that something else goes wrong (I didn't see this omitting behavior mentioned in the doc?).

Guess I will just close this as WAI for future reference then.