Change in offsetTop value doesn't register

[Martin Lafrance]

What a great script!!! So many thanks for building/implementing
this!!!

I want to use it to monitor the offset of inputs on a webform. So far,
I was able to register changes in styles, but I just don't get alerted
when the offset value changes.

Here is my test page:
http://www.kinologik.com/test-Chrome.html

Thank you

[Rafael Weinstein]

You're very welcome. I'm glad you like it.

Unfortunately, you're not going to like my answer: There's no way to
do what you are trying to do.

The short explanation of why is that Web Platform is a bit of a
Franken-monster that's evolved over the years, so it has lots of weird
edges that webdevs shouldn't have to care about, but do.

In your example, you've hit on two such weirdnesses.

The first is that element attributes are different from element
properties. "style" is an element attribute. Element attributes can be
observed with Mutation Observers (and thus this library). "offsetTop"
is an element property. It's a really a function that the browser
pretends is a ever-present value. When you read offsetTop from script,
typically the browser has to go do a bunch of calculation to give you
the answer. It's not actually storing that value anywhere, and thus
there's nothing really to observe.

The other weirdness is style. There are two kinds of styles, inline
styles and computed styles. An inline style would be something like

<div class=myThing style="background-color: red">My Thing</div>

In this case, the style value is stored in the element attribute on
the div and it can be observed, but only for changes that affect that
attribute, like say

myThing.setAttribute('style', 'background-color: blue');

A computed style is something that happens under the covers in the
browser, It's the value of the style on the element that is the result
of all of the style rules that are applied to the element, both the
inline style (as above) and any cascading styles that apply from
<style> tags or external style sheets. Again, in this case, the
browser doesn't ever store these values internally, so there's nothing
to observe.

On behalf of browser implementors, I apologies for the strangeness of
the situation we've arrived in, but unfortunately, we're kinda stuck
with the platform we have.

Sorry I can't be more help, but hopefully this explains a bit of
what's going on.

> --
> You received this message because you are subscribed to the Google Groups "mutation-summary-discuss" group.
> To post to this group, send email to mutation-sum...@googlegroups.com.
> To unsubscribe from this group, send email to mutation-summary-d...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/mutation-summary-discuss?hl=en.
>