At a zoomed page, hovering section edit button shifts the highlighted block a bit

[Klap-in]

On for example https://www.dokuwiki.org/changes in Chrome or Firefox (on Ubuntu), if I have zoomed in on the page (to 120/120%, or 90%), I see the text block which is highlighted for section editing is shifting a marginally if you hover the edit button. At 100% there is no shift.

Of course not urgent, but if it is something simple it might be worth some attention.

[Michaelsy]

As far as I understand, such small layout shifts should have been fixed by PR #3957.

- Michael Sy.

[Klap-in]

That PR replaced the original behavior of completly replacing the highlighted content every time on hover.

[Michaelsy]

I took a closer look at the effect. The problem, according to my opinion, is that highlighting not only changes color, but also changes geometry on HTML elements. This leads to a recalculation, which in turn can lead to rounding differences due to fitting into the screen resolution grid. And so there is a shift of one pixel (or subpixel).

As a proof of concept you can enter the following in userstyle.css:

.dokuwiki div.section_highlight_wrapper {
    margin: 0 -2em; 
    padding: 0 1em;
    border: solid transparent;
    border-width: 0 1em; 
}

.dokuwiki div.section_highlight {
    border-color: #eee; 
}

Thus, only a color change occurs during the actual highlighting. The necessary areas are created beforehand and are therefore already available.

This works for me. Even particularly clearly, because with me the effect had set, that in the first section (of changes with folded down TOC) a new text break had resulted and a line less was needed. Because of this the edit button jumps away immediately when you move the mouse over it. As a result, you can no longer click the edit button. I have had this effect several times in the past and it is quite annoying.

- Michael Sy.

Edit: I'm a bit surprised that I've never read about other users having problems with a section edit button jumping away. (This is very rare, but when it occurs it is quite annoying.) Perhaps it has something to do with the fact that I have my Windows screen scaling (and thus automatically this of the browser) set to 125%.