►
Description
Do calls to `offsetWidth` always force a layout recalculation, even in ResizeObserver callbacks? Let's find out!
- Originating comment:
https://gitlab.com/gitlab-org/gitlab-ui/merge_requests/810#note_231406426
- Relevant Firefox source code:
https://dxr.mozilla.org/mozilla-central/rev/d42c22627c8dee9e9286fd5d7bbc3d02afbfad44/dom/base/Element.cpp#931
- Resulting experiment (with clean up):
https://codesandbox.io/s/peaceful-gates-47rnl?fontsize=14
A
So,
and
let
me
share
my
screen
too,
and
give
the
scope
of
what
we're
diving
into
so
this,
mr
David
introduced,
really
awesome
directive
for
using
the
resize
observer
API
and
is
one
of
the
examples.
As
we
were
just
talking
about
things,
it
kind
of
made
a
really
interesting
example
where
there
was
we're
gonna
like
show
multiple
widths
and
Heights
like
based
on
the
border
box
and
the
content
box.
A
Well
to
get
the
border
box,
you
have
to
actually
read
off
it
with
an
offset
height
from
the
target,
and
you
know
the
past,
year-plus
or
so
I've
been
really
watchful,
for,
let's
try
not
to
needlessly
use
that
if
we
can,
because
it's
one
of
the
things
that
forces
a
real
layout
reflow
and
it
also
takes
away
from
that's
one
of
the
key
benefits.
I
think
we
get
was
resize
observer
is
I.
Don't
have
to
read
that
value
it
sent
to
me
like
before
paint.
What
so
is
like?
A
Oh,
this
is
great,
so
we
don't,
but
the
question
was
neither
David
or
I
were
really
certain.
If
you
call
this
from
within
a
resize
observer,
is
that
actually
gonna
calculate
or
relay
out
reflow
I
have
some
ideas
for
how
you
get
to
the
bottom
of
that
question
and
I
am
fairly
unprepared,
but
two
approaches
and
I
want
to
hear
from
you
Scott.
What
do
you
think
is
the
most
interesting
when
I
went
up
in
the
past
when
I'm
not
certain
what
the
native
browser
API
is
doing?
A
I've
just
you
know,
dived
into
Mozilla
source
code,
and
you
can
kind
of
we
can
kind
of
try
to
grep
some
sort
of
understanding
there
or
I
think
we
can
create
an
experiment.
The
experiment
that
I'm
interested
in
would
be
if
we
have
a
whole
bunch
of
resize.
So
let's
say
we
have
a
whole
bunch
of
elements
listening
to
resize,
observe
and
let
me
get
four
for
context.
Let
me
let
me
show
what
that
looks
like,
and
this
is
in
the
context
of
you,
but
it's
various
we
can.
A
We
don't
have
to
use
this
with
you.
It's
very
simple,
so
you'd
end
up.
The
best
approach
is
to
have
one
resize
observer,
and
you
just
attach
elements
to
this
one
instance,
which
is
a
resize
observe
and
then,
whenever
something
that
can
resize,
we
get
array
of
entries
that
have
changed
and
we
can
handle
these.
However,
so
in
this
case
we
actually
just
write
this
handle
of
straights
of
element,
but
we
could
do
a
number
of
different
things.
A
A
One
experiment
I
had
would
be
what
if
we
had
like
a
bunch
of
elements
in
a
grid
and
the
way
I
handled,
one
elements
in
myarray
here
was
gonna
like
change
technically
everybody's
else's
with
for
hi
whatever,
when
I
read
the
next
elements,
offset
width
or
offset
height,
is
it
gonna
give
me
the
old
value
or
is
it
gonna
give
me
the
new
calculated
value
based
on
my
last
element
that
I
just
it
so
I
was
like
saying
like
let's
say
we
have
like
a
bunch
of
these.
In
a
row.
A
Does
this
does
calculate
offset
with
give
me
the
most
accurate
value
and
if
it
gives
me
the
most
accurate
value,
it
must
be
doing
some
sort
of
recalculation
stuff?
That's
my
experiment
suggestion.
So
what
do
you
think's
got?
Should
we
create
an
experiment,
or
should
we
dive
into
Mozilla
source
code,
or
do
you
want
to
split
up.
B
A
A
A
A
lot
of
optimal
points
in
the
life
cycle
of
rendering
the
page
or
whatever
so
like
like
we
should
have
these
values
on
hand
like
so
you
know
that's.
The
question
is
like
if
I
called
one
of
these
values,
instead
of
doing
so,
if
I
did
inside
here,
my
resize
handle,
if
I
did
like
event
target
dot
offset,
which
am
I
gonna,
be
forcing
a
relay
out.
But
recalculation
of
these
layout
stuff
is
a
question,
so
maybe
maybe
be
helpful
like
we
can
dive
into
the
code.
Maybe
it'd
be
helpful.
B
A
Yeah
they
have
it
in
the
other,
smart
guy
for
yep.
Here
we
go
I,
don't
think
they
use,
gets
and
stuff.
Okay,
yeah
it's
a
little
funky,
but
I've
been
here
before
a
that's.
That's
great.
To
hear.
Okay,
let's
start
by
just
saying,
searching
for
absolutely
and
see
what
we
showed
the
hard
thing
whenever
I
do
like
these
searches.
For
you
end
up
with
all
these
tests,
that's
a
hard
thing,
I
think
with
doing
searches.
This
is
like
a
big
mono
repo,
so
you're
gonna
get
a
lot
of
stuff.
A
A
C
B
A
C
A
A
A
A
C
A
B
A
C
A
A
B
B
A
A
Changes
to
flush-
oh
this
is
a
class
Oh.
Oh
god,
I
got
I
got
it.
Okay.
Now
you
didn't
C++
before
a
little
bit,
okay
yeah.
So
this
is
like
the
same
thing
as
doing
not
exactly
same
but
like
doing
this
is
the
class.
This
is
my
variable.
Flush
equals
new
class.
These
are
my
arguments,
but
we
do
new
it.
You
know
there's
no
garbage
collection
in
C++,
so
this
is
the.
This
is
a
garbage
collection
safe
way
of
doing
so.
A
A
A
A
You
need
to
flush
the
sink
for
non
HTML
documents:
organisms
having
parent.
We
must
flush
the
parent
to
ensure
that
our
containers,
reflow
different
size,
would
changed,
but
if
it's
not
safe
to
flush
ourselves
and
don't
flush,
the
parent
says
that
its
media
queries
mean
that
size
change
in
our
container
textile.
Yes,
this
is
just
like
propagating
flushing
all
throughout
the
pipes.
B
A
A
A
C
A
A
A
A
B
A
A
A
C
A
A
B
C
A
A
A
A
A
A
A
B
A
B
A
B
A
A
A
A
A
C
C
C
A
C
A
A
A
Give
me
the
true
one
or
just
the
one
at
this,
while
I'm
looking
for
this
at
the
specific,
oh
I'm,
in
the
wrong
place
at
this
specific
execution
point.
So
the
way
I
was
thinking
of
doing.
That
would
be
a
hey
for
each
call
to
these.
What
if
we
also
just
like
every
time,
there's
a
resize,
we
like
added
to
its
height,
lit
up
or
maybe,
but
somehow
we
need
them
all
like
next
to
each
other
as
well.
A
B
Well,
wouldn't
we
like
a
hundred,
is
kind
of
hard
to
keep
track
of?
Ok,
what
if
we
did
like
yet
10
and
then
we
don't
even
need
to
worry
about
the
styles
and
then
we
could
see
what
is
being
updated
right
for
the
content
rect.
So
then
we
can
reference
the
the
numbers-
oh
wow,
oh
yeah,
you
because
it
you
have
display
flexes
my
name's
Lexi.
You
know.
A
Nice,
alright,
this
looks
like
an
experiment,
so
what
I
was
thinking
of
doing
was
like
if
we
can
get
it
to
stretch
like
alt
like
for
with
flexo,
begin
to
stretch
all
the
way,
and
then
maybe
just
we
just
just
update
the
first
one
like
every
time.
There's
a
resize.
We
just
keep
updating
the
first
one
so
like
it's
gonna
cause
the
other
ones.
When
I
update
that
one,
it's
gonna
cause
the
other
ones
to
need
to
change.
What
happens
there
is.
Was
the
idea
alright,
so
here
I?
A
A
A
B
A
A
A
A
A
A
A
A
A
About
is,
are
we
are
we
doing?
Are
we
updating
these
the
right
way?
Half
after
the
fact,
so
in
the
same
and
this
same
iteration
of
on
resize
after
the
fact
have
I
are
my
offset
with
spin
offset
Heights.
The
new
values
are
the
old
Knights
man.
This
is
nice,
trippy,
I
guess
I
need
to
also
set
flex
to
zero.
A
A
C
A
A
C
A
A
A
B
A
A
A
A
Yeah,
this
I'm
gonna
create
an
array
of
the
client
widths
and
Heights
beforehand
and
after
and
we're
gonna
compare
the
two
and
see
how
are
we
doing
are
we
did
actually
getting
the
right
thing,
we're
creating
an
array
of
the
client.
What's
a
client
heights
before
he
had
an
afternoon
so
call
this
the
I
don't
know
something
like
loopy
box
and
we'll
map
each
one.
We're
gonna
get
the
target
and
we'll
map
its
to
be
a
client
with
the
target
client
with
finite
target
client
hi.
Oh
that's.
C
A
Those
were
off,
but
that
last
ones
give
me
different,
because
the
Flex
box
is
doing
something
interesting
client
with
they're
just
off
by
one,
oh
they're
off
by
one,
because
this
one's
is
growing
by
10.
But
if
I
changed
that
once
instead
of
growing
by
10,
he
grows
by
like
50.
They
should
be
off
by
like
5.
A
Yeah,
so
this
one
was
317
yes
and
I,
updated
it
by
50,
and
these
guys
were
all
off
by
5.
Why
I'm
gonna
say
it's
been
proven
scouts
like
okay,
good
enough
for
me,
yeah
I
think
I'll
create
a
little
thing
about
it
and
post
it
on
the
slack
channel
in
the
comments
and
for
anyone,
who's
interested
but
looks
like
anytime.
We
call
client
with
the
client
height
it's
going
to
flush
layout
notifications.
No,
no
now
I
didn't
do
anything
to
change
the
layout.