GoogleChromeLabs / css-triggers

A reference for the render impact of mutating CSS properties.
https://csstriggers.com/
Apache License 2.0
902 stars 70 forks source link

Section for What forces layout / reflow #23

Open yeomann opened 8 years ago

yeomann commented 8 years ago

Hi guys, from this question stack overflow question, may i suggest if we can add section for something like Layout trashing. For example, On site it is mentioned that transform property doesn't cause geometry change i.e no layout re-flow but i think it's worth mentioning that if its called through JavaScript then it does! Let me know your thoughts if i can contribute as well or if i am wrong?

surma commented 8 years ago

Changing a transform (even through JS) does not force relayout or repaint in Chrome. The gist by Paul Irish says that getComputedStyle() does cause relayout if a transform is set.

Currently, csstriggers shows that Gecko, Edge and Webkit do relayout when you change transform. However, @paullewis and I are believe that to be a bug of the respective DevTools and is not actually true.

gregwhitworth commented 7 years ago

Hey @surma and @paullewis I do think it's worth adding this section. We should document what APIs cause a reflow, eg: getBoundingClientRect() offsetHeight, etc as we see the common read-modify-write pattern on the web and it would be nice if this was included.

surma commented 7 years ago

For reference: @paulirish’s collection of JS APIs that cause layout

gregwhitworth commented 7 years ago

Ok, I'm not a hardcore designer but I know my away Photoshop - here's a quick mockup, don't focus on the data it's merely for finalizing the design. Let me know your thoughts. I recommend switching the domain to *triggers.com which most are actually available since technically these aren't CSS triggers but do force a style recalc and possibly layout. Let me know your thoughts @surma and @paullewis

css-triggers

surma commented 7 years ago

Yeah, @paullewis had already been messing around with potential domain names. Any suggestions welcome. EngineTriggers doesn’t sound too bad, but I’d like to convey that it’s web-related somehow.

Design looks A+ to me, great stuff :)

gregwhitworth commented 7 years ago

This feels like the need for a twitter poll, UA Triggers, Browser Triggers, Pipeline Triggers

surma commented 7 years ago

Ha, let’s see what happens.

surma commented 7 years ago

So, technically “Browser triggers” won, but I liked the idea of just getting “jstriggers.com” (which I just bought) and having both URLs link to the same site. WDYT?

oldergod commented 7 years ago

Browser triggers is a mouthful to me. I like the idea having multiple domains linking to a same site.

gregwhitworth commented 7 years ago

Be honest with everyone, trigger just makes me think of chiggers so whatever works for everyone else I'm good with. Just have the title swap out then when you change the tab * Triggers. I'm assuming you all are able to insert the data from Paul's post into the format?