Skip to content

target-size should ignore position: fixed elements outside the viewport when the page is scrolled #5065

Description

@straker

When an element is position: fixed and positioned above the viewport of the page, and the page is scrolled, target-size no longer ignores them and reports violations on them. However these elements do not report violations when the page is not scrolled.

Currently a position: fixed element is ignored for target-size if it's above the viewport. This is because when creating the grid we check if the element isVisibleOnScreen before adding it to the grid. isVisibleOnScreen determines that the element is above the viewport so does not add it to the grid. But when the page is scrolled the getElementCoordinates function (called by isOffscreen) adds the page scroll to the elements position. This causes the element to have a position within the viewport and thus be added to the grid.

If you take the following code and run target-size at the top of the page, both buttons report as passing (the button above the viewport is correctly ignored when calculating target-offset). However if you scroll to the bottom and then run target-size both buttons return as violations as the Offscreen button is now considered to be inside the viewport.

<!doctype html>
<html lang="en">
  <body style="height: 5000px">
    <p><button style="position: fixed; top: -15px; height: 10px">Offscreen button</button></p>
    <p><button style="position: fixed; top: 0; height: 10px">Too-small visible button</button></p>
  </body>
</html>

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions