Bug 134627

Summary: SVG webfont can be clipped when using translate3D
Product: WebKit Reporter: Antoine Pultier <antoine.pultier>
Component: TextAssignee: Nobody <webkit-unassigned>
Status: RESOLVED CONFIGURATION CHANGED    
Severity: Normal CC: ahmad.saleem792, ap, krit, rniwa, simon.fraser, zimmermann
Priority: P2    
Version: 528+ (Nightly build)   
Hardware: All   
OS: All   
Attachments:
Description Flags
Screenshot on iOS 7.1.2
none
JsFIDDLE reproducing the bug
none
Safari 15.5 behaves like Chrome but differ slightly from Firefox none

Description Antoine Pultier 2014-07-04 02:53:43 PDT
Created attachment 234395 [details]
Screenshot on iOS 7.1.2

I tested it with Chrome, iOS 7.1.2 and Chrome Canary (I don't have a recent mac).
Comment 1 Antoine Pultier 2014-07-04 02:54:28 PDT
Created attachment 234396 [details]
JsFIDDLE reproducing the bug
Comment 2 Antoine Pultier 2014-07-04 04:30:24 PDT
As additional information, I have also the issue if I have an opacity CSS3 animation on an element below the icon. But it's harder to reproduce the bug outside my application.
Comment 3 Ahmad Saleem 2022-06-30 13:41:47 PDT
Created attachment 460588 [details]
Safari 15.5 behaves like Chrome but differ slightly from Firefox

I tweaked the JSFiddle by removing -webkit- prefix and changing translate3D with translate3d into this:

Link - https://jsfiddle.net/ugmxarfL/show

I am not able to reproduce it on Safari 15.5 on macOS 12.4 and also on iOS 15.5 on iPhone 13 Pro Max. As per screenshot, it is matching with Chrome but Firefox has slight deviation and moving the text upward.

There is no clipping like as attached in the screenshot of iOS behavior.

I think it was fixed along the ways and can be marked as "RESOLVED CONFIGURATION CHANGED" unless if I am testing it incorrectly, in latter case, please retest accordingly. Thanks!