Re: [csswg-drafts] [css-conditional] Applying styles based on an elements size (@media for elements) (#3852)

> a synchonous version - which we had in msElementResize - caused us numerous performance issues

It is not because it was synchronous that it was causing issues, it is because the only way to use this was to trash layout, and you need to trash layout O(n^2) for the amount of breaks you have in your code, so with just two nested layers of observation you already make layout 4 times slower. Plus it is linear to the amount of observations you have, and many used this for children of a list so layout was thrashed dozens of times as all the items would get notifications and trash the layout before the next one did. So, sure, if you trash layout dozens of times, synchronicity is then problematic because layout then blocked the main thread. 

Async doesn't make things more performant, tough, it actually makes things way slower (now you are also trashing paint on top of layout), but at least the page stays responsive because the main thread isn't busy looping: it has some breath of fresh air between the layout wastes. This isn't a solution, the solution is to not waste layout, and we have all the tools needed to accomplish that goal cleanly today, so I see no reason why we would settle for less.

> I think having the flash is a solid trade off to keeping async

This very thread is a testimony that this is not true. I'm quoting here:

> The issue with running it in javascript, is that you can get a flickering as the ResizeObserver will get triggered on every change and the css you are applying can break the condition (i.e. by changing the width).
> 
> By moving this into CSS it's not longer an issue.

Using the same pipeline as RO to achieve the desired results will not solve any of the problems people are facing with RO today and which make them say this isn't the solution they want (while still admitting it is the solution they need, because there isn't any better).

-- 
GitHub Notification of comment by FremyCompany
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3852#issuecomment-493886697 using your GitHub account

Received on Monday, 20 May 2019 08:22:30 UTC