1819274 - outline on html element doesn't show bottom outline edge

Status: NEW

(DevTools :: Inspector, defect, P3)

Description

[joeking]

User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:109.0) Gecko/20100101 Firefox/110.0

Steps to reproduce:

Basic page html with body big enough to extend beyond screen. I put styling of
html{
outline: solid 1px #f00;
outline-offset: -1px;
}

Actual results:

open the developer tools (f12). The bottom and left side of the html outline doesn't show. It seems to be overlapped by the top of the devtools and the left side is somehow off screen. If I change to outline-offset: -2px then the bottom is visible. The devtools top seems to overlap the html element bottom by 1px.

Expected results:

Outline should be visible on screen , in viewport.

Comment 1

[Julian Descottes [:jdescottes]]

Also seems to reproduce with a simple border, eg

html{
border: solid 1px #f00;
}

We can see that the bottom border seems to overlap with the devtools. Although we can't see the issue for the left border: can you share a screenshot and a test page? We used https://bug-1819274-testcase.glitch.me/ here, can you check if you have an issue with the left border on this page.

Looks like zooming in text-only mode also allows to see the border.

Comment 2

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

The component has been changed since the backlog priority was decided, so we're resetting it.
For more information, please visit auto_nag documentation.

Comment 3

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

Clear a needinfo that is pending on an inactive user.

Inactive users most likely will not respond; if the missing information is essential and cannot be collected another way, the bug maybe should be closed as INCOMPLETE.

For more information, please visit BugBot documentation.