css-position


Polymer paper-fab with position:fixed behaves strangely when used with core-list that has a scrollTarget


I took the polymer demo messages example, put it into a jsbin and then edited it to pull out the list and fab into a separate polymer element. In other words pretending that we wanted to make the inbox editor a reusable component.
This more closely resembles my application, as I have broken it into many such components to make it more modular (one of the great benefits of web components IMO).
As the fab is part of this new element then leaving it position absolute puts it at the very bottom off the list rather than always bottom right of the window.
To fix that I simply changed it to position fixed. See this jsbin
It loads fine but when you start scrolling (in latest chrome) the fab scrolls with the list content, instead of remaining fixed at the bottom right.
Interestingly if you click the mouse on the bottom right of the window (where the fab should have been) the fab jumps down to the right place. Now when you scroll it remains in the correct position.
Very strange. Any ideas of the cause and whether I am doing something wrong or it is a polymer bug?
After a quick googling around I found that adding -webkit-transform: translateZ(0); to paper-fab element fixes it to the viewport.
Working jsbin
Related question: position:fixed not working in Google Chrome
I have no idea why this happens, the only vaguely relevant bug that I found is https://code.google.com/p/chromium/issues/detail?id=420534 but it's the other way round: it's about transform: translateZ(0); on parent element that makes its children scrolling and not fixed.

Related Links

How can I put a section under cross-fade background section
Content div nex to fluid fixed div
Where does this distance difference come from
Absolute position relative to some arbitrary element
Relative positioning of custom controls with OpenLayers 3
How to set div height with relative position as child div with absolute position using css?
I'm trying to put a fixed divsion at the top of the page but when I scroll with FF, lines are lost
fixed position z-index not working
how to create adjustable gap between elements (div)
How to properly apply a css hack for IE11 transition misbehaviour
How do you make leaflet popup window full screen on small screens?
Fix a div to the bottom while scrolling with skrollr
Sticky Footer at bottom of PAGE, not just bottom of WINDOW
How to set div absolute position from the parent div
Polymer paper-fab with position:fixed behaves strangely when used with core-list that has a scrollTarget
What is the use of “static” positioning in CSS?

Categories

HOME
spark-streaming
gpu
object
angular2-material
swt
yahoo-finance
obfuscation
error-handling
gradient
pdfbox
edge
scripting
permissions
babeljs
mapbox
jquery-ui
nuget-package
missing-data
boto3
discrete-mathematics
teechart
p2p
enterprise-architect
modbus-tcp
video-editing
undertow
imageresizer
jquery-multiselect
oculus
intersystems-cache
user-defined-functions
browser-sync
testcomplete
google-cast
laravel-eloquent
android-gridview
slacktextviewcontroller
searchkit
apic
c9.io
resolution
vaadin-charts
openresty
fclose
tf
bbpress
bootstrap-tags-input
cronexpression
redistributable
parfor
watch-os-2
mongodb-php
i386
vorpal.js
upx
jbase
iokit
google-books
rpart
canvg
nutiteq
telepat
jquery-forms-plugin
cross-join
metatrader5
psr-4
create.js
fpdi
websphere-esb
openargs
bin
scrypt
composite-component
uimanageddocument
wcf-configuration
denied
catransform3d
listactivity
clrstoredprocedure
quotation-marks
codebase
addchild
opml
scrollbars
nstokenfield
request-headers
dsl-tools
firefox-3
wspbuilder

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App