Display issues: Toast is too large, then flashes at the top during animation about paper-toast HOT 10 CLOSED

I found a way to recreate it in jsbin: https://jsbin.com/rudodozawa/edit?html,console,output

from paper-toast.

Some further input, the paper-toast ends up getting a style.top = 0; (and a few other attributes set) unfortunately I wasn't able to see what caused them in any related code... However putting the .show() behind an async... is a simple work around to this for now.

(in the jsbin)

      document.querySelector('paper-toast').async(function() {
        this.show('foobar');
      }, 300); // Note: outside JSbin, a delay of 1 was sufficient

I believe this may be related to: https://bugs.chromium.org/p/chromium/issues/detail?id=564758
Reasoning: it doesn't happen in Safari

from paper-toast.

Thanks @ktiedt ! 👍 Also, I forgot to mention, this bug has a permanent after-affect on the paper-toast element (as seen here: https://jsbin.com/loyesacevu/edit?html,console,output )

from paper-toast.

For completeness, this what I found last night:

I dug into that paper-toast but some more, it seems that in certain circumstances getComputedStyles returns different data for an element depending on that import happening and that causes iron-fit-behavior's _deviceInfo method to cache illogical values (top:0 and position:static) that these problems.

overriding _deviceInfo may seem like a logical fix, but even that did consistently fix things, although it did fix the after-effect from becoming permanent.

It really seems like _deviceInfo needs to be able to be reliably made async in order to avoid this odd glitch in Chrome.

from paper-toast.

seems like a bug with how iron-fit-behavior gets used, probably paper-toast should override resetFit and ensure bottom/left is set.

from paper-toast.

Adding this.style.position = ""; this.style.top = ""; to the end of .center() fixes the display issue. I'm not sure if that overrides other intended behavior though. Here's a fiddle: https://jsbin.com/vorufazace/1/edit?html,output

from paper-toast.

That may be the simplest fix and considering the comment above that method regarding IronFitBehavior, I think it may be the correct one.

from paper-toast.

I noticed this happens also with a normal div if we try to compute its getBoundingClientRect https://jsbin.com/bireduh/2/edit?html,console,output

from paper-toast.

You can make the importHref async https://jsbin.com/hofasoc/1/edit?html,console,output

Polymer.Base.importHref('either/good/or/bad/import.html', null, null, true);

from paper-toast.

This seems an issue with imports on chrome, see this other example https://jsbin.com/necapa/2/edit?html,console,output

Reported the issue here https://bugs.chromium.org/p/chromium/issues/detail?id=629236

There has been a similar issue reported here Polymer/polymer#3113

Closing this as it's a browser issue, and there is a proposed fix #71 (comment)

from paper-toast.