Giters

hakimel / Fokus

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Highlight Placement

kopepasah opened this issue · comments

commented

If there is padding added to the HTML of the page, the placement of the highlight is slightly skewed.

For example, when using the WordPress admin toolbar, WordPress adds padding to the HTML element of the page. This additional padding on the HTML element causes the highlight placement to be higher than the selected element.

commented

Can you send me a link to an example where I can reproduce this? Have been trying out variations of padding but it seems to be work.

commented

Any site with a top margin applied to the HTML element will reproduce the problem.

Note that this style must be in the sites core styles and not added using an Element Inspector.

I do not have any current sites that have a margin applied to the HTMK element, but if you have WordPress site some where you can enable the WordPress admin bar (v3.0+) on the front end of the site. Enabling this adds a top margin to the site (spacing for the admin bar) if you are logged in.

commented

Hakim - this should help,

Testing with padding to HTML

Steps to reproduce the same -

  1. Highlight the text.
  2. Fokus automatically emphasizes the paragraph.
  3. Press F12 to open chrome developer tools.
  4. Select html tag.
  5. Add padding:10px to element.style & see the issue!
commented

Thanks guys. The document element was not reached when traversing offset parents but that's been fixed.