Bug 254647

Summary:	tooltip on hover has different position in Safari
Product:	WebKit	Reporter:	Ahmad Saleem <ahmad.saleem792>
Component:	CSS	Assignee:	Nobody <webkit-unassigned>
Status:	RESOLVED INVALID
Severity:	Normal	CC:	karlcow, ntim, webkit-bug-importer
Priority:	P2	Keywords:	BrowserCompat, InRadar
Version:	WebKit Nightly Build
Hardware:	Unspecified
OS:	Unspecified

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.