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
A demo of the bug can be found here: https://github.com/Twinbird24/vue-scale-transition-example/tree/simplified
A video demonstration of the bug can be found here: https://gofile.io/?c=4HwzAT
Here is the code on Stackblitz: https://stackblitz.com/edit/vuejs-starter-ndpy8b?file=styles.css. Click on the css file (styles.css) to change the scale and you'll discover the bug.
The code found in the GitHub/ Stackblitz linked above contains two divs that are fading in and out through the use of Vue transitions. There is a third div that is absolutely positioned above these transitioning divs. The bug appears when you change the scale of the container that holds all of these divs (look for the commented CSS for the source of the bug). After a certain point, the z-index of the third absolutely positioned div will break, and it will become covered up by the transitioning div. This bug appears in Chrome, but doesn't seem to be apparent in Firefox.
Why does my navbar jump a little to the right when a drop-down is selected? Looks like some padding is missing on :hover perhaps. Any help would be appreciated. Thanks
http://www.85widening.com/default.html
It has to do with Bootstrap hiding the vertical scrollbar on body when the modal opens. It occurs only when you have a fixed navbar and body/modal content that require vertical scrolling.
Based on what I recall and found, it's a bug with Bootstrap 3 that I don't believe was ever resolved based on this GitHub issue.
Most workarounds seem to involve JS to add padding-right (like 15px) to the navbar when the modal opens or to override the overflow: hidden property the modal-open class that Bootstrap adds to body when you open a modal. The downside of this is you will have two vertical scroll bars (ugly). Either add the workaround or remove the fixed navbar. I haven't moved on to Bootstrap 4 yet but maybe they've addressed this.
This is not a coding question but rather a quick stop for directions.
I am looking into using Bootstrap framework for my next project. Bootstrap 3 official site has a great selection of default templates, but it seems to me they all have the same flaw -- I'll explain below.
One of the best responsive design features if a combination of JS and CSS media queries to take a regular, across the top, navigation and turn it into a hidden (on click) expand/collapse menus. This is great, BUT, all of the examples simply drop the menu links below each other and while it looks OK on a phone, it looks a bit ridiculous when a link with a single word, for example "About", is placed in a div of its own 768px wide.
A much nicer solution is to have that left or right sliding menu bar that pushes or overlaps the content of the site. Unfortunately there are not too menu of such examples, or at least I was not able to locate them.
This is where I need some help -- any basic templates with preferably right side menu on for smaller viewport browsers?
Here's an example right off-canvas navbar that may work for you...
Most of the off-canvas examples I've found push a sidebar off-canvas, but the top navbar is still collapsed into the usual vertical nav.
However, this example adjusts the navbar into a sliding right sidebar on smaller devices:
https://codeply.com/p/KDMFdhc6c8 (Bootstrap 3.x)
You could also consider switching over to Foundation (I've use bootstrap and foundation frameworks for several years and bout area great, one usually fits a project better than the other, depending on the needs).. Foundation has a native off-canvas component and it works very well (both left and right side off-canvas is available!)
foundation.zurb.com/docs/components/offcanvas.html
I'm having some issues with a website that only occur in Safari. I'm running version 5.1.7 (7534.57.2) on a Mac.
You can view the site here: http://mcad.edu/annual-report-2011-12/.
The website is parallax scrolling, with a relative positioned content div that holds everything, including the 3 parallax scrolling backgrounds which are all fixed, top and left set to 0.
Within the fixed parallax background containers, colorized images fade into full color images when a user mouses over them. For each "image", there are two divs stacked, each with background images that are positioned by background-position. The div on the bottom has the colorized image. The div on top has the full color image as a background and has its opacity set to 0 until mouseover. The fade is achieved using a CSS transition on the opacity property so that the top div becomes visible.
So, in Safari only, when I mouse over any of these divs, the transition occurs smoothly but all of the content in the same parallax scrolling background div shifts/jumps in the process. If I remove the CSS transition, this does not occur.
I think that it might have something to do with the transition/webkit-transition property not playing nicely with a fixed position container in Safari. However, all of the issues I've found that relate to that are from 2010 and mention a Safari bug that I assume has been fixed…two years later. But maybe not.
There's also another issue with the Catalyst section (3rd dot down on the right navigation). These animated images work as links in Chrome, Firefox and Opera, but not Safari. Any ideas?
I have a similar issue with a fixed position and transition-duration for a header menu I've created. When a visitor scrolls down, the menu has a box shadow that fades into place. Well when this is viewed on safari in a MacOS, I get a weird sliding in issue. To easily fix this, after spending way to much time searching for answers, I'm removing the transition effect for macs. This fixes the slide in issue but gets rid of the transition effect sadly.
So as you were speculating, it probably is the transition duration on your project as well. The best thing for this would probably be to make a Mac-Safari CSS file, get rid of the transition-duration for that particular area and move on with your project.
Best I can suggest for now. Hope it helps.
Task: I wanted to create a simple share button which extends to a share section (F,T,G,P) when clicked.
I failed to let the section slide out of the share button - what I really, really wanted - but managed to let a separate ul element slide out on the right side.
The animation worked… until I set the ul to hide initially via $('.networks').hide();
The sections is intended to only show up after a click, but now after the first click it just "pops open" ignoring the configured slide-out. Sliding only works in both directions (open and close) after clicking on it at least once .
I've uploaded an Example here at Codepen.io and as a jsFiddle.
Side note: the demos are behaving a little bit strange since they appear to only show a slide-in fx. The slide-out fx, with which we start, always looks like it pops open - that's not the case, it works after the second click, so you got to focus your eyes to see it (on a normal browser it visibly works better).
PS: Bonus points if you help me make this slide out of the "share" button. Be aware that I only have rudimentary knowledge of Javascript ( * duck and run * ).
Take a look at this fiddle link.
I changed the display property of the buttons to be inline-block instead of inline.
Elements with display inline can not have a width and i think it was the reason why jQuery was not able to animates the Elements width. I also animated the wrap around the ul instead of the ul.
EDIT: made a fast mockup of the thing sliding out of the button. Changed some css to be on the list elements itself instead of on the a elements, just work through the css and I think it will look ok.
edit forgot the link: link