WebKit Bugzilla
New
Browse
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
RESOLVED CONFIGURATION CHANGED
176858
div with animated 'transform' should remain a containing block for positioned descendants, even if it's animating the value "transform:none"
https://bugs.webkit.org/show_bug.cgi?id=176858
Summary
div with animated 'transform' should remain a containing block for positioned...
Daniel Holbert
Reported
2017-09-13 10:42:56 PDT
I'm using Safari 10.1.2. STEPS TO REPRODUCE: (1) Visit
https://jsfiddle.net/kkpznn6L/
EXPECTED RESULTS: No red should be visible. ACTUAL RESULTS: Red is visible. (The fixed-pos lime div abandons its red containing block and uses the viewport as its containing block instead.) Notes: The animation ends at "transform:none", which normally (if there weren't any animations) would mean that the red div should stop being a containing block for positioned children, which would mean that Safari's behavior here is correct [1]. However, that spec text doesn't matter because there's another effect that supercedes it, from the CSS Animations spec: "While an animation [...] has an animation-fill-mode of 'forwards' or 'both', the user agent must act as if the will-change property ([css-will-change-1]) on the element additionally includes all the properties animated by the animation."
https://drafts.csswg.org/css-animations/#animations
So the rendering should be the same as what it'd be if "will-change:transform" were present. For comparison, here is a reference case with that style manually added:
https://jsfiddle.net/kkpznn6L/1/
Safari renders *that one* correctly (no red). So, that means Safari is mis-rendering the original testcase (
https://jsfiddle.net/kkpznn6L/
) -- it's not honoring this bit of CSS Animations spec text. Firefox 55 and Edge 15 each produce the expected result, BTW. Chrome 62 dev and Safari 10.1.2 produce the incorrect/unexpected result. Chrome bug:
https://bugs.chromium.org/p/chromium/issues/detail?id=764783
[1] "...any value other than 'none' for the transform also causes the element to ... [act] as a containing block for fixed positioned descendants."
https://drafts.csswg.org/css-transforms/#transform-rendering
Attachments
Add attachment
proposed patch, testcase, etc.
Simon Fraser (smfr)
Comment 1
2017-09-13 13:42:36 PDT
Yeah, we haven't implemented that "will-change" piece fully yet.
Radar WebKit Bug Importer
Comment 2
2017-09-13 13:42:52 PDT
<
rdar://problem/34417985
>
Ahmad Saleem
Comment 3
2023-01-22 06:52:53 PST
I am not able to reproduce this bug in Safari 16.2, Safari Technology Preview 161 and it is matching with Chrome Canary 111 and Firefox Nightly 111. Marking this as "RESOLVED CONFIGURATION CHANGED". Thanks!
Note
You need to
log in
before you can comment on or make changes to this bug.
Top of Page
Format For Printing
XML
Clone This Bug