Weird behavior: re-sizing an object with padding about enfocus HOT 13 CLOSED

I think goog.style.getPaddingBox could be used to fix this.

from enfocus.

If I can get a bit more info on this ticket I can take a look at it tonight.

What browser are you using?
Do you have a code snippet?
For the code snippet what dimensions are you expecting?

CK

from enfocus.

I think I may see the issue. I am using getSize and setSize in the goog.style library. It looks like in some versions of IE the setSize is setting the content box size and getSize is getting bordered box size. Let me know if this I am on the right track. This has to do with the box model used in IE. I can fix it but it might be expensive in IE. I will have to do some more testing.

from enfocus.

i'm using chromium with an object of padding 10px. When I try to resize it, the 'initial' size is too big. Yet, if I try to resize an object of 0px of padding, everything looks fine.

I'm using enfocus here https://github.com/Frozenlock/siren.
You can see the behavior when I'm resizing a box (when a siren box is disappearing).

If you load the library, just load a temporary siren and then a sticky one: (siren! "Hello!") (sticky-siren! "Oh, hey!"). When the first disappear you will see the weird behavior caused by the resizing.

from enfocus.

I think I know what the issue is I will use siren as the test case.

CK

from enfocus.

First I like the idea of your library I can certainly see using something like this on my projects. Not sure I am seeing the exact issue as you saw it. At first I wasn't able to see Hello! at all, because you were passing a symbol into domina/by-id on line 42. I fixed this and gave you a pull request. Now I see the hello but it quickly disappears. This doesn't seem to be the expected behavior given your instructions. I do see a glich when a temporary item disappears and sticky ones already exists, they get bumped over momentarily. Is this the issue you are seeing. I just want to make sure I am looking at the right thing when I apply the fix.

from enfocus.

Yes, that's exactly the problem I was talking about!

A simple call to 'siren!', unless given a map with a precise delay, will disappear after a few seconds.

The instructions I gave you is to make a temporary siren and then a sticky one (before the first goes away, which is the part I didn't specify).

This 'bumped over' problem occurs only with an object of padding non-nul.

from enfocus.

I have pushed a fix out to 1.0.0-snapshot can you test it out. If it works I will close the ticket.

from enfocus.

Forgot, move you dependency to 1.0.0-SNAPSHOT to test the fix.

from enfocus.

Unfortunately the two methods return the same dimensions.

(goog.style.getBorderBoxSize s1) -> #<(320 x 42)>
(goog.style.getSize s1) -> #<(320 x 42)>

(Where s1 is a siren object)

However,
(goog.style.getPaddingBox s1) -> #<(10t, 10r, 10b, 10l)>

This should be it, because the default siren box has a padding of 10px.
So the 'true' size could be obtained by subtracting the padding box dimensions from the getSize result.

Alternatively:
(goog.style.getContentBoxSize s1)-> #<(300 x 22)>
This should be the correct dimensions to begin a resize with.
A word of caution; this how this method is described:
"This is potentially expensive in all browsers."

If you really wish to keep this library as lightweight as possible, I
could simply wrap every DIV in another invisible DIV without any
padding. But the problem would still be there, lurking... waiting for
an innocent soul... ;-)

from enfocus.

Now that I think about it, the getPaddingBox will not get the border dimensions, but getContentBoxSize will surely do.

from enfocus.

I have pushed the fix out to 1.0.0-alpha3. Just a not I did just getContentBoxSize and tested it with siren to make sure it worked. Thanks for finding this and diagnosing it.

from enfocus.

Thank you very much!
I upped Siren to 0.1.5 with the new Enfocus version.

from enfocus.