Skip to content

Commit

Permalink
Patch for powertip offset bug when zoomed on Blink render
Browse files Browse the repository at this point in the history
Reference getBoundingClientRect behavior in
https://bugs.chromium.org/p/chromium/issues/detail?id=489206
  • Loading branch information
Joel Steres committed Jun 12, 2017
1 parent 582ff4d commit e985896
Show file tree
Hide file tree
Showing 3 changed files with 37 additions and 4 deletions.
8 changes: 6 additions & 2 deletions src/core.js
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,8 @@ var DATA_DISPLAYCONTROLLER = 'displayController',
'mouseenter',
'mouseleave',
'contextmenu'
];
],
PATCH_DUMMY_ELEMENT_ID = 'chromeBugOffsetRef';

/**
* Session data
Expand All @@ -60,7 +61,8 @@ var session = {
windowWidth: 0,
windowHeight: 0,
scrollTop: 0,
scrollLeft: 0
scrollLeft: 0,
chromePatchRefElement: null
};

/**
Expand Down Expand Up @@ -97,6 +99,8 @@ $.fn.powerTip = function(opts, arg) {
return $.powerTip[opts].call(targetElements, targetElements, arg);
}

injectChromePatchReferenceElement();

// extend options
options = $.extend({}, $.fn.powerTip.defaults, opts);

Expand Down
2 changes: 1 addition & 1 deletion src/placementcalculator.js
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ function PlacementCalculator() {
* @return {Object} An object with the top,left position values.
*/
function getHtmlPlacement(element, placement) {
var objectOffset = element.offset(),
var objectOffset = getCompensatedOffset(element),
objectWidth = element.outerWidth(),
objectHeight = element.outerHeight(),
left,
Expand Down
31 changes: 30 additions & 1 deletion src/utility.js
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ function isMouseOver(element) {
// methods do not work with SVG elements
// compute width/height because those properties do not exist on the object
// returned by getBoundingClientRect() in older versions of IE
var elementPosition = element.offset(),
var elementPosition = getCompensatedOffset(element),
elementBox = element[0].getBoundingClientRect(),
elementWidth = elementBox.right - elementBox.left,
elementHeight = elementBox.bottom - elementBox.top;
Expand Down Expand Up @@ -201,3 +201,32 @@ function countFlags(value) {
}
return count;
}

/**
* Conditionally insert reference element for use in Chrome zoomed offset patch
* Reference https://bugs.chromium.org/p/chromium/issues/detail?id=489206
*/
function injectChromePatchReferenceElement() {
if (/Chrome\/[.0-9]*/.test(navigator.userAgent) && !document.getElementById(PATCH_DUMMY_ELEMENT_ID)) {
session.chromePatchRefElement = $('<div id="' + PATCH_DUMMY_ELEMENT_ID +
'" style="position: absolute; left: 0px; top: 0px; width: 1px; height: 1px; visibility: hidden"></div>').prependTo(document.body);
}
}

/**
* Compensate for the Chrome getBoundingClientRect bug when zoomed.
* Reference https://bugs.chromium.org/p/chromium/issues/detail?id=489206
* @param {jQuery} element The element that the tooltip should target.
* @return {Offsets} The top, left offsets relative to the document.
*/
function getCompensatedOffset(element) {
if (session.chromePatchRefElement) {
var offset = element.offset();
var rd = session.chromePatchRefElement[0].getBoundingClientRect();
return {
left: offset.left - (rd.left + window.pageXOffset),
top: offset.top - (rd.top + window.pageYOffset)
};
}
return element.offset();
}

0 comments on commit e985896

Please sign in to comment.