CODEWITHSUNDEEP
javascriptjquerycss
Tihomir Iliev
Tihomir Iliev

Reputation: 116

offset() of zoomed element

jQuery documentation for offset() states:

Also, dimensions may be incorrect when the page is zoomed by the user; browsers do not expose an API to detect this condition.

However, is there a way I could calculate the correct offset in browsers in touch environment when using spread to zoom in the contents of a page?

I created a small sample demonstrating the issue: https://jsfiddle.net/dhykgsmp/4/ (open in Chrome). Please scroll down and click zoom in. The offset of the autocomplete input is wrong.

Thank you.

Upvotes: 4

Views: 1340

Answers (2)

Vladimir Nikolsky
Vladimir Nikolsky

Reputation: 26

I had the same problem and found a workaround. You need a root child element with zero offsets to make this work.

$.fn.oldOffset = $.fn.offset;
$.fn.offset = function () {

    var c = $.fn.oldOffset.apply(this, arguments);

    // root child element with zero offset
    var wrc = $('body').children().first().oldOffset();

    var needToFix = wrc.left > 0 || wrc.top > 0;
    if (needToFix) {
        return {
            left: c.left - wrc.left,
            top: c.top - wrc.top
        };
    } else {
        return c;
    }
}

Upvotes: 1

Andrue Anderson
Andrue Anderson

Reputation: 659

I'm not sure what the intended functionality of this code is, but if you'd like the 'autocomplete input' element to be positioned relative to the 'autocomplete container' I would suggest using the .style.top attribute, or getting the location with Element.getBoundingClientRect() and setting the position accordingly in your positionDropdown() function.

Upvotes: 0

Related Questions