[wp-trac] [WordPress Trac] #46371: Make sure in-page anchors are not hidden behind top bars

[WordPress Trac]

#46371: Make sure in-page anchors are not hidden behind top bars
-------------------------------------------------+-------------------------
 Reporter:  afercia                              |       Owner:
                                                 |  sabernhardt
     Type:  defect (bug)                         |      Status:  accepted
 Priority:  normal                               |   Milestone:  5.9
Component:  Toolbar                              |     Version:
 Severity:  normal                               |  Resolution:
 Keywords:  has-screenshots has-patch needs-     |     Focuses:  ui,
  testing                                        |  accessibility, css
-------------------------------------------------+-------------------------
Changes (by sabernhardt):

 * keywords:  has-screenshots has-patch needs-refresh => has-screenshots
     has-patch needs-testing


Comment:

 The latest patch adjusts scroll padding for bundled themes:

 - Twenty Fourteen has a fixed header of (at least) 48px. This adds scroll
 padding for most in-page anchors. However, the "more" tag already had
 padding from r46429, so this adds extra space to that when clicking
 "Continue reading" links. Reverting r46429 might be appropriate when
 including this.
 - Twenty Sixteen has a 21px visual border on larger screens.
 - Twenty Seventeen has a fixed header of 72px. The "more" tag seems to
 have a JS solution, so this also would add extra padding to those anchors
 and enough for others.

 Another idea I had considered was creating an additional variable for
 themes to set their own fixed header heights, which might not be any
 better than the way the patch does it.
 {{{
 html {
         --wp-admin--admin-bar--height: 32px;
         scroll-padding-top: calc( var(--wp-admin--admin-bar--height) + var
 (--wp-theme--header--height, 0px) );
 }
 }}}

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/46371#comment:29>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform