Bug 254647 - tooltip on hover has different position in Safari
Summary: tooltip on hover has different position in Safari
Status: RESOLVED INVALID
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: BrowserCompat, InRadar
Depends on:
Blocks:
 
Reported: 2023-03-28 22:24 PDT by Ahmad Saleem
Modified: 2023-05-11 00:19 PDT (History)
3 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Ahmad Saleem 2023-03-28 22:24:37 PDT
Hi Team,

While going through StackOverflow, I came across another failing test:

Test Case - https://jsfiddle.net/cfqm8wxs/

^ Look at triangle position on tooltip. It is broken on WebKit ToT (262258@main) as well. [Works fine with Chrome Canary 114 and Firefox Nightly 113]

StackOverflow - https://stackoverflow.com/questions/75871170/tooltip-on-hover-has-different-position-in-safari

Just wanted to raise so we can track this.

Thanks!
Comment 1 Karl Dubost 2023-03-29 00:28:01 PDT
This is the position of `.button::after` which is different and the size. 
so the way the position and size of `content: attribute()` is handled.
Comment 2 Radar WebKit Bug Importer 2023-04-04 22:25:17 PDT
<rdar://problem/107645566>
Comment 3 Tim Nguyen (:ntim) 2023-05-10 23:01:30 PDT
This is just because Safari uses a different default font for buttons, if you set `font: 13.33px Arial` on the button, we match other browsers.

(The tooltip positioning relies on `em` units which depends on font-size)
Comment 4 Tim Nguyen (:ntim) 2023-05-11 00:19:19 PDT
This behaves correctly. Changing the default font size might be a different issue, but out of scope for this bug.