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 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?
CSS: fixed position
Style sheet positioning won't keep everything in place
Div on top 100%
CSS float image align
google sites html box tool css postion absolute
Manual Positioning of Shareaholic ShareBar Plugin
Div position (margin:auto)
Removing or Hiding Blank Space Left by Relative Positioning
Lightweight Javascript Responsive Positioning Library

Categories

HOME
sonarqube
c99
forms
twig
serialization
package
error-handling
spring-data-mongodb
carousel
switch-statement
zip
polling
missing-data
azure-container-service
retrofit2
vert.x
modal-dialog
watson-conversation
android-securityexception
jxl
xcodebuild
gource
symbol
alpacajs
firefox-addon
cgbitmapcontext
php-mysqlidb
highstock
comparator
delimiter
realm-mobile-platform
twiml
kudu
utorrent
glib
code-snippets
instantiation
node-mssql
bc
signals-slots
mcustomscrollbar
doc
tcc
importerror
wc
strftime
hammer.js
spring-integration-sftp
vugen
type-theory
monkey
rocks
usart
mapxtreme
reporting-services-2012
redbeard-ios
pacemaker
mongodb-php
installshield-2010
firebase-security
spreadjs
directdraw
java-money
gocql
dllimport
vigenere
microsoft-reporting
include-guards
rubaxa-sortable
sapscript
doctype
skspritenode
node-serialport
public-html
theos
packet-sniffers
android-vibration
pseudo-class
crowd
mutual-authentication
radiant
menubar
gae-quotas
clickbank
sbcl
mt4j
hibernate-entitymanager
c++builder-xe5
dolby-audio-api
virtual-pc
alice
wimax
listitem
jsr286
cgimage
user-tracking
unattended-processing
resharper-6.0
aspmenu
hbm2java
zen
filesystemobject
silverlight-oob
cuda.net
sqlobject
firefox-3
business-model
information-management

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