Describe the bug
When client side rendering an image with width: 100%, the resulting image has a width of zero.
I think the issue is here specifically:
|
dom[name] = value == null ? '' : value; |
It seems as though Preact tries to set img.width = '100%' and only tries to do img.setAttribute('width', '100%') if that fails. The issue is that img.width = '100%' does not cause an exception, but it does coerce the string to an integer and ultimately sets the image width to zero. img.width when accessed as as property is meant to be only an integer: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-width
To Reproduce
https://codesandbox.io/s/preact-images-csr-only-lrpkbp?file=/src/App.js
Load the page. Expected: the sandbox has an image with width=100%. Actual: the image is not visible since it has width=0
Describe the bug
When client side rendering an image with width: 100%, the resulting image has a width of zero.
I think the issue is here specifically:
preact/src/diff/props.js
Line 121 in c483d96
It seems as though Preact tries to set
img.width = '100%'and only tries to doimg.setAttribute('width', '100%')if that fails. The issue is thatimg.width = '100%'does not cause an exception, but it does coerce the string to an integer and ultimately sets the image width to zero.img.widthwhen accessed as as property is meant to be only an integer: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-widthTo Reproduce
https://codesandbox.io/s/preact-images-csr-only-lrpkbp?file=/src/App.js
Load the page. Expected: the sandbox has an image with width=100%. Actual: the image is not visible since it has width=0