Bug 189968

Summary: padding not adjusted until after transform complete
Product: WebKit Reporter: nefiga
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: ahmad.saleem792, ap, bfulgham, dino, graouts, rniwa, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari 11   
Hardware: Unspecified   
OS: Unspecified   

nefiga
Reported 2018-09-25 12:37:48 PDT
There is a problem when combining transform with padding changes over a transition that causes the element to be positioned incorrectly. Please see https://jsfiddle.net/t1d298a7/
Attachments
nefiga
Comment 1 2018-09-25 12:47:08 PDT
The same thing happens with margin instead of padding
nefiga
Comment 2 2018-09-25 12:54:17 PDT
Seems like many things that would change the vertical box height affect in this same way: line-height, font-size, etc.
Radar WebKit Bug Importer
Comment 3 2018-09-26 11:36:56 PDT
Ahmad Saleem
Comment 4 2022-08-07 04:59:08 PDT
I am able to reproduce this bug in Safari 15.6 on macOS 12.5 using attached JSFiddle from Comment 0 and as mentioned, in Safari, it readjust after 3 seconds or finish animating to recalculate the position while in other browsers (Chrome Canary 106 and Firefox Nightly 105), it renders fine and does not go beyond visual viewport and then readjust. Thanks!
Note You need to log in before you can comment on or make changes to this bug.