Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

www.virustotal.com - The hover tooltip appears offset from it's location #53295

Closed
wesinator opened this issue May 24, 2020 · 6 comments
Closed

www.virustotal.com - The hover tooltip appears offset from it's location #53295

wesinator opened this issue May 24, 2020 · 6 comments
Labels
browser-firefox depends-blink issue caused by Blink engine-gecko The browser uses the Gecko rendering engine os-mac Issues only happening on macOS. priority-normal severity-minor The site has a cosmetic issue. status-needsinfo
Milestone
fixed

Comments

@wesinator
Copy link

wesinator commented May 24, 2020 •
edited
Loading

URL: https://www.virustotal.com/gui/file/04d91d62c7ff6e1c1fcd0e9c534184df72925539dbd58322046f5dff61e75ea3/detection

Browser / Version: Firefox 76.0
Operating System: Mac OS X 10.14
Tested Another Browser: Yes Chrome

Problem type: Something else
Description: Hover tooltip appears offset from location in Firefox
Steps to Reproduce:
Hover mouse over a red AV detection entry, such as

Acronis
Suspicious

The custom hover tooltip in Chrome is displayed next to the entry, in Firefox it displays further down the page, disconnected from the entry.

View the screenshotScreenshot
Browser Configuration
  • None

From webcompat.com with ❤️
@webcompat-bot webcompat-bot added this to the needstriage milestone May 24, 2020
@webcompat-bot webcompat-bot added browser-firefox engine-gecko The browser uses the Gecko rendering engine priority-normal labels May 24, 2020
@softvision-oana-arbuzov softvision-oana-arbuzov added the os-mac Issues only happening on macOS. label May 24, 2020
@cipriansv cipriansv changed the title www.virustotal.com - see bug description www.virustotal.com - The hover tooltip appears offset from it's location May 25, 2020
@cipriansv cipriansv added the severity-minor The site has a cosmetic issue. label May 25, 2020
@cipriansv cipriansv modified the milestones: needstriage, needsdiagnosis May 25, 2020
@cipriansv
Copy link

Thanks for the report @wesinator.

I was indeed able to reproduce the issue. The tooltip was not displayed next to the corresponding field.

Tested with:
Browser / Version: Firefox Nightly 78.0a1 (2020-05-11), Chrome 81.0.4044.138
Operating System: macOS 10.15.3

This is the web page displayed in Firefox Nightly:

image

And this is the web page displayed in Chrome:

image

Moving the issue to needsdiagnosis.

@ksy36 ksy36 self-assigned this May 25, 2020
@ksy36
Copy link
Contributor

ksy36 commented May 26, 2020

Position of the tooltip is being calculated in this function:

 n.prototype.updatePosition = function () {
        if (this._target && this.offsetParent) {
          var t,
          n,
          e = this.offset,
          i = this.offsetParent.getBoundingClientRect(),
          o = this._target.getBoundingClientRect(),
          r = this.getBoundingClientRect(),
          a = (o.width - r.width) / 2,
          s = (o.height - r.height) / 2,
          c = o.left - i.left,
          l = o.top - i.top;
          switch (this.position) {
            case 'top':
              t = c + a,
              n = l - r.height - e;
              break;
            case 'bottom':
              t = c + a,
              n = l + o.height + e;
              break;
            case 'left':
              t = c - r.width - e,
              n = l + s;
              break;
            case 'right':
              t = c + o.width + e,
              n = l + s
          }
          this.fitToVisibleBounds ? (i.left + t + r.width > window.innerWidth ? (this.style.right = '0px', this.style.left = 'auto')  : (this.style.left = Math.max(0, t) + 'px', this.style.right = 'auto'), i.top + n + r.height > window.innerHeight ? (this.style.bottom = i.height + 'px', this.style.top = 'auto')  : (this.style.top = Math.max( - i.top, n) + 'px', this.style.bottom = 'auto'))  : (this.style.left = t + 'px', this.style.top = n + 'px')
        }
      },

The difference between Firefox and Chrome seems to be that this.offsetParent element is <body> in Firefox and <vt-ui-carousel id="carousel"></vt-ui-carousel> in Chrome. So the values for top/left positioning using this.offsetParent.getBoundingClientRect() are different.

I think that Firefox behaviour is correct, since offsetParent shouldn't leak a node inside a shadow tree, according to w3c/csswg-drafts#159. Safari behaves the same as Firefox here.

There is a bug open to align Blink's behaviour https://bugs.chromium.org/p/chromium/issues/detail?id=920069 to match Gecko and Webkit, so I think we can close this as a duplicate

@ksy36 ksy36 closed this as completed May 26, 2020
@ksy36 ksy36 modified the milestones: needsdiagnosis, duplicate May 26, 2020
@wesinator
Copy link
Author

Position of the tooltip is being calculated in this function:

 n.prototype.updatePosition = function () {
        if (this._target && this.offsetParent) {
          var t,
          n,
          e = this.offset,
          i = this.offsetParent.getBoundingClientRect(),
          o = this._target.getBoundingClientRect(),
          r = this.getBoundingClientRect(),
          a = (o.width - r.width) / 2,
          s = (o.height - r.height) / 2,
          c = o.left - i.left,
          l = o.top - i.top;
          switch (this.position) {
            case 'top':
              t = c + a,
              n = l - r.height - e;
              break;
            case 'bottom':
              t = c + a,
              n = l + o.height + e;
              break;
            case 'left':
              t = c - r.width - e,
              n = l + s;
              break;
            case 'right':
              t = c + o.width + e,
              n = l + s
          }
          this.fitToVisibleBounds ? (i.left + t + r.width > window.innerWidth ? (this.style.right = '0px', this.style.left = 'auto')  : (this.style.left = Math.max(0, t) + 'px', this.style.right = 'auto'), i.top + n + r.height > window.innerHeight ? (this.style.bottom = i.height + 'px', this.style.top = 'auto')  : (this.style.top = Math.max( - i.top, n) + 'px', this.style.bottom = 'auto'))  : (this.style.left = t + 'px', this.style.top = n + 'px')
        }
      },

The difference between Firefox and Chrome seems to be that this.offsetParent element is <body> in Firefox and <vt-ui-carousel id="carousel"></vt-ui-carousel> in Chrome. So the values for top/left positioning using this.offsetParent.getBoundingClientRect() are different.

I think that Firefox behaviour is correct, since offsetParent shouldn't leak a node inside a shadow tree, according to w3c/csswg-drafts#159. Safari behaves the same as Firefox here.

There is a bug open to align Blink's behaviour https://bugs.chromium.org/p/chromium/issues/detail?id=920069 to match Gecko and Webkit, so I think we can close this as a duplicate

Thanks - so the Chrome behaviour is unexpected for the browser, then isn't the site code wrong ?!
The current tooltip in Chrome makes the most sense to me

Anyway

@ksy36
Copy link
Contributor

ksy36 commented May 26, 2020

Good point @wesinator. Yeah, the site is relying on Chrome's behaviour here, which technically isn't correct according to the spec.

I'll try to contact the site as eventually when https://bugs.chromium.org/p/chromium/issues/detail?id=920069 gets fixed, the tooltip will be displayed in the wrong position in Chrome as well

@ksy36 ksy36 reopened this May 26, 2020
@ksy36 ksy36 modified the milestones: duplicate, needscontact May 26, 2020
@ksy36
Copy link
Contributor

ksy36 commented May 26, 2020

Reached out through the contact form here https://www.virustotal.com/gui/contact-us

@ksy36 ksy36 modified the milestones: needscontact, sitewait May 26, 2020
@karlcow karlcow added the depends-blink issue caused by Blink label Apr 5, 2021
@softvision-oana-arbuzov
Copy link
Member

The issue seems to be fixed. The tooltip is positioned correctly now.
image

Tested with:
Browser / Version: Firefox Nightly 91.0a1 (2021-06-03)
Operating System: Windows 10 Pro, MacOS 11.3.1

@wesinator can you still reproduce it?

@ksy36 ksy36 removed their assignment Mar 30, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
browser-firefox depends-blink issue caused by Blink engine-gecko The browser uses the Gecko rendering engine os-mac Issues only happening on macOS. priority-normal severity-minor The site has a cosmetic issue. status-needsinfo
Projects
None yet
Milestone
fixed
Development

No branches or pull requests
6 participants
@karlcow @ksy36 @wesinator @webcompat-bot @softvision-oana-arbuzov @cipriansv