 So, umm, we inadvertently broke `linear()`, `cubic-bezier()`, and `steps()` in certain cases in Chrome 128 😬 It’s broken in the case where you have whitespace after the opening `(` Broken: `linear( 0, 1)` https://issues.chromium.org/issues/361652145 (It’s only the whitespace after the opening `(` causing issues here. All other whitespace does not affect things, as typically goes in CSS) we wont be calling these drop-downs anymore tho, with anchor() auto-flip it… **might be a drop-up!** video alt: Goooooo Scroll-Driven Animations! I explain the code behind a similar demo in the 7th episode of my free “Unleash the Power of Scroll-Driven Animations” video course. 🎬 https://scroll-driven-animations.style/#learn Go check out the full course and become an expert in Scroll-Driven Animations 🤩 Goooooo Scroll-Driven Animations! I explain the code behind a similar demo in the 7th episode of my free “Unleash the Power of Scroll-Driven Animations” video course. 🎬 https://scroll-driven-animations.style/#learn Go check out the full course and become an expert in Scroll-Driven Animations 🤩 🙌🏻 WebKit have indicated a positive support position on the new Invoker Commands API (unless anything unexpected crops up in the next week) [1]. If you’re wondering what this #WebPlatform API is, I recorded a 5 minute video a few weeks back: https://youtu.be/AY6BMht28qg [1]: https://github.com/WebKit/standards-positions/issues/264#issuecomment-2299007803 I blug about #css again. Preventing an `!important` user agent style from kicking in with an infinite-duration transition https://noahliebman.net/2024/08/beating-important-user-agent-styles/
Show previous comments
@noleli I’m assuming this works, because the user specified styles get applied first, because the !important of the user agent stylesheet makes it kick in last? And that’s how the initial state of the transition is set? I never thought of !important styles being applied *after* regular ones in a “time” sense. 😅  @johnallsopp I FEEL AS THOUGH THE STONE HAND AXE IS A BAD IDEA JOHN CAN WE PLEASE STOP WITH ALL THAT PALEOLITHIC NONSENSE Day 109: the animation-composition property CSS animations can be composited in three ways: replace, add, and accumulate. The animation-composition property allows you to switch between them. Starting with version 128, Chrome and Edge now have an implementation of document.caretPositionFromPoint! Docs: https://developer.mozilla.org/en-US/docs/Web/API/Document/caretPositionFromPoint Very useful for web text editors, especially when working with Shadow DOM. We only need Safari now for it to become Baseline! @bramus There is also `overflow-anchor` as covered at CSS Tricks: https://css-tricks.com/books/greatest-css-tricks/pin-scrolling-to-bottom/ Here is a pen I made combining with another #CSS only trick to start the scroll from bottom with zero JavaScript: @MerriNet Checked this in detail and while it does work, it doesn’t seem to play nice in situations where the scroller goes from non-overflowing to an overflowing state (which could be considered a bug). Also a pity that it requires an element (or generated content) that actually takes up space (i.e. `min-height: 1px`). And finally no Safari support for this, unfortunately :-( https://codepen.io/bramus/pen/GRbxOPX/f6627102553f568a71fec831498b2d6b Beyond regular expressions: Enhancing CSS value parsing in Chrome DevTools https://developer.chrome.com/blog/devtools-css-value-parsing?hl=en New in @ChromeDevTools (in Chrome Canary): You can now force more states – such as :active, :focus, … – onto elements. For example, when inspecting an <input> element you can now also force states such as :enabled, :valid, etc. These extra states depend on the context. When inspecting a <label> element, you get different options than when inspecting <input>.  @bramus can we also have an ability for the emulated states like hover or focus to propagate to the parents? Very often I want to apply :hover on dive element, and it trigger all the :hover on all the ancestral events. Same for :focus-within triggering for focus/focus-visible. @bramus I had no idea this was possible but was curious how it works, so I made a quick #codepen of this idea: https://codepen.io/mgrubinger/pen/LYKQaQz I love how simple (and reliable) this #css solution is!
Show previous comments
 @grooovinger @bramus it doesn't seem to work in Firefox unfortunately. Based on Can I Use, `scroll-snap-type` and `scroll-snap-align` are supported, but maybe not these values?  @grooovinger @bramus as cool as this is, I think this also breaks inertia scroll on iOS. 🤔 Thanks for building it though, I was curious to implement it myself when I tread the original Toot. 😊 I feel like I’ve read about a similar solution using overflow-anchor somewhere, but I might be mistaken, since that property doesn’t do what I thought it did. 😅
Show previous comments
👀 Apple/WebKit about to express support for cross-document View Transitions (and related features such pageswap, pagereveal, render blocking) + also View Transition Types. https://github.com/WebKit/standards-positions/issues/193#issuecomment-2290888602 Get the rundown of these features here: https://developer.chrome.com/blog/view-transitions-update-io24 (video included) You can capture CSS selector stats and identify slow selectors in the Performance panel! #chromedevtools #css #webperformance this is one of the most fascinating deep dive rabbit hole articles i've read in a long time. my brain melted but omg so fascinating  @paul Hi Paul! I created a short (3:38) application video (https://youtu.be/iu5RnX47Ebg) to express my excitement for developer relations for Chrome at Google. Please check it out! Would love to chat more about future opps.
Show previous comments
 @bramus @FirefoxNightly hey @cheeaun would this help with the weird empty space above the keyboard? @bramus I don’t see a WebKit standards position issue for this. Has one been filed? https://github.com/WebKit/standards-positions/issues  Nice. Would be great if browsers could also emulate those changes in svh/dvh wink wink nudge nudge. |
Gregory's Server
To see how far this extends, I queried the HTTP archive.
Out of the 559 million “root pages” in the set, about 6k are affected by this – mainly in their usage of `cubic-bezier()`.
While this is very unfortunate, I believe the number of affected sites seems quite reasonable.
At worst the effects on those sites will run using a `linear` timing, instead of the custom one.
The fix is easy too: remove the whitespace.