Replies: 1 comment 2 replies
-
|
Hi Cucar, I believe this issue has been mentioned in the past and it's due to the fact that |
Beta Was this translation helpful? Give feedback.
-
|
This is the correct answer. Putting a We have some light DOM hierarchy validation in |
Beta Was this translation helpful? Give feedback.
-
|
For any future readers: #4093 |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
I spent hours trying to debug a layout shift issue on our website. I tracked it down to Preact and I think what I found should be shared in Preact documentation somewhere. This is probably an issue for other frameworks as well but I had not heard about it before. Here's the thing: if you have a div in a p, Preact render will work but it will be inefficient and you may see some DOM updates. The main reason is coming from the browser. Check this out:
What do you think this would return? If you guessed p element, that's wrong. It actually returns this: HTMLCollection(3) [p, div, p]
It breaks the paragraph into three pieces. The weird part is that webkit will actually insert div elements in p when you edit it in contenteditable mode and press enter in it.
In any case, users should be wary of not using div inside p in order to avoid this inefficiency. I think it would be a good idea to add this somewhere in Preact documentation.
Beta Was this translation helpful? Give feedback.
All reactions