search

hakimel / Fokus

MIT License
625 stars 87 forks source link

Highlight Placement #3

Closed kopepasah closed 12 years ago

kopepasah commented 12 years ago

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.

hakimel commented 12 years ago

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.

kopepasah commented 12 years ago

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.

pankajparashar-zz commented 12 years ago

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!
hakimel commented 12 years ago

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