Avoid flicker when highlighting a section
commit2e60baeaa9f135f358d6333487696ba22771a2e1
authorAndreas Gohr <andi@splitbrain.org>
Thu, 20 Apr 2023 09:51:49 +0000 (20 11:51 +0200)
committerAndreas Gohr <andi@splitbrain.org>
Thu, 20 Apr 2023 09:51:49 +0000 (20 11:51 +0200)
treed9fad4658c8691afa276ddd0b5dc3884d54a9afd
parent91a25860ebdf15b20aa33b98d798cd0c04851206
Avoid flicker when highlighting a section

Previously, elements were wrapped in a div on hover and unwrapped when
the mouse was moved again. This generally worked okay, but led to
problems where the wrapped section contained elements with their own
rendering context (video, object, iframe, ...). The wrapping caused
rerendering of these elements resulting in flicker and layoutshift:

splitbrain/dokuwiki-plugin-vshare#13
cosmocode/dokuwiki-plugin-diagrams#4

This patch changes the higlighting mechanism to always wrap *all*
sections in a div and only toggle classes on hover. Class names have
been chosen to be backwardscompatible, so this should continue to work
as before in all templates.
lib/scripts/page.js