]> git.gir.st - VimFx.git/commit
Fix missing hint markers for tabs on caniuse.com
authorSimon Lydell <simon.lydell@gmail.com>
Mon, 25 Jan 2016 17:57:16 +0000 (18:57 +0100)
committerSimon Lydell <simon.lydell@gmail.com>
Mon, 25 Jan 2016 17:57:16 +0000 (18:57 +0100)
commit3010c08364c0fd9547aed1ab95b7efb7b7906d70
tree64240632aa82ea4dc94cc1980f8d53fbd80502a1
parent394ecb3c8c7bf810f59ec554cc6ebeec7b9fb70e
Fix missing hint markers for tabs on caniuse.com

The "feature" tabs for a specific feature on caniuse.com look like this:

    ___________ ___________
    |         :\|         :\
    |  Tab 1  :+\  Tab 2  : \
    |_________:__\________:__\

The "real" tab elements are the rectangles to the left of the dotted vertical
lines. The triangle parts are made using the `::before` or `::after`
pseudo-elements of the tabs.

When calling `.elementFromPoint()` on a pseudo-element, its parent element is
returned. But calling `.getBoundingClientRect()` on the parent element returns a
rectangle only around the the parent element, excluding the pseudo-element.

Because of the pseudo-elements overlap the next tab, the second tab is
considered covered by the first tab.

Previously, a point to the right of the first tab would then be tried. But since
the pseudo-element isn't included in `.getBoundingClientRect()` that would mean
the point marked with a `+`, which is actually to the _left_ of the original
point, not to the right! That obviously didn't work.

With this commit, if the "try-right point" is to the left of the initial point
and the covering element and the queried element are in the same frame, the
point is tried again but this time forcing the element to be considered located
at that point, solving the issue.

Using pseudo-elements to create non-rectangular tabs is quite common, so this
will help on other sites as well.
extension/lib/hints.coffee
Imprint / Impressum