1850236 - wrong position for an empty inline

Status: NEW

(Core :: Layout, defect)

Description

[jochen.kuehner]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36

Steps to reproduce:

1.) go to page: http://130.61.246.67:8082/webui/index.html
2.) doubleclick "aaaa" on the left side.
3.) now select the emji-picker, the overlay is on a wrong position

Actual results:

The issue happens, cause the element "iobroker-webui-screen-editor" has a wrong offsetTop value. it is 26 in chrome and safari and 13 in firefox.
you can see it if you switch to dev tools, search for "iobroker-webui-screen-editor". also the overlay of the devtools is on the wrong position.

Expected results:

the offsetTop value of "iobroker-webui-screen-editor" should be the same as in chrome

Comment 1

[jochen.kuehner]

Attachment: overlayFirefox.png

Comment 2

[jochen.kuehner]

Attachment: overlayChrome.png

Comment 3

[jochen.kuehner]

My Chrome/Firefox windows are not exactly the same size, but you see, the devtools overlay in firefox is moved 13px to the top

Comment 4

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'DevTools::General' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 5

[jochen.kuehner]

This is not a devtools issue, the issue is only visible in the devtools

Comment 6

[jochen.kuehner]

could be fixed by removing "position:relative" on iobroker-webui-screen-editor, but why? and why does it work in chrome&webkit

Comment 7

[jochen.kuehner]

Now I have a reproducable simple scenario:

https://jsfiddle.net/7ke2hbyg/

offsetTop of the custom element should be "0" (it is in chrome and webkit), but it is -12 in firefox

Comment 8

[Emilio Cobos Álvarez (:emilio)]

Attachment: Reduced test-case from reporter.

Comment 9

[Emilio Cobos Álvarez (:emilio)]

So the first issue is that the a-a element in your example is display: inline effectively, and you probably want it to be a block, otherwise it's position depends on various inline layout details. I'll take a closer look tho.

Comment 10

[Emilio Cobos Álvarez (:emilio)]

Attachment: Fully reduced test-case.

Yeah, so it's just about the position of an empty inline being a bit off. It's just that this inline has other absolutely positioned stuff inside.

At the very moment it becomes either a block or has text the offsetTop becomes zero.

As an immediate workaround, making the relevant element a block (since it's empty) should be a fix.

It seems we have bug 1592017 for a very similar issue. I'll try to fix but it's probably very long-standing, so hard to say if anything depends on it.

Does the above help? Does making it a block fix the issue you're seeing? Just trying to confirm that the reduced test-case above is representative of comment 0.

Comment 11

[Emilio Cobos Álvarez (:emilio)]

I mean, the positioning makes sense, it's just that we give it a positive height and align it...