search

googlearchive / paper-toast

A lightweight feedback about an operation in a small popup at the base of the screen on mobile and at the lower left on desktop.
17 stars 8 forks source link

paper-toast position #16

Closed ghost closed 9 years ago

ghost commented 9 years ago

It looks like paper-toast is not positioned properly. I have a paper-button on my page (image bellow). As you can see, the button can be seen without scrolling.
ss 2014-11-16 at 03 04 30

When I click the button, I should see paper-toast on the bottom left corner of the screen (I haven't modified the paper-toast styles). However, I have to scroll to the bottom of the page to see the toast and I think that's not how it is intended to function. Image bellow. ss 2014-11-16 at 03 11 38

Here's my web page: https://gist.github.com/PizzAna/30158c0f8ed7c444408a Here's the javascript I used (main.min.js): https://gist.github.com/PizzAna/231b323f2b76b3a78742 Here's original version of the script (main.js): https://gist.github.com/PizzAna/285730a60c94ed175945

I'm using polymer version 0.5.1

frankiefu commented 9 years ago

I need a better test case for the issue. I tried to use the files but there are some files missing, for example, site.min.css is not there. It would help us a lot if you could simplify your test page a bit or even better provide a jsbin. Thanks.

ghost commented 9 years ago

I added all files into a zip and cleaned up the code a bit . Here's a link https://www.dropbox.com/s/3g5y5ugoz7w8t0a/page.zip?dl=0

frankiefu commented 9 years ago

The problem is in your app you have transform: translateZ(0); -webkit-transform: translateZ(0); set on the body. This will make position: fixed not working: https://code.google.com/p/chromium/issues/detail?id=20574.

There usually not any good reason to add translateZ(0) on the body. If you remove that from your css then paper-toast would position correctly.

ghost commented 9 years ago

Thanks! I'm not quite sure why that even was there in the first place