I am trying to use paper-fab element, but since I started using it I get some issues with its ripple effect.
After extending paper-fab the ripple effect becomes like rectangle
(circle expected).
paper-fab with label instead of icon cause its ripple to
uncover little bit from the bottom.
paper-fab ripple is working as expected with icon.
After digging in its shadow dom I could solve the second issue by adding height: 100% to div#clip element inside its shadow dom [though I couldn't solve it by code, only by inspector :( ].
Unfortunately I couldn't find anyway to get the ripple effect work as expected after extending paper-fab.
Any help would be appreciated.
All issues mentioned above have been solved after updating to v0.4.0
Related
I have one strange bug on my website. When i trying to transform block with text by using
transform: translateY(0px) translate3d(0,0,0) translateZ(0);
i got this block but with black (or white) stripes behind the text. I suppose in depends what background is - light or dark.
I can't attach the screenshot for example, so i leave a link.
Animated blocks - text block that appeared when you scroll the page.
This animation perfectly work in all browsers, but not in Firefox (windows ver.).
Maybe someone saw this and could help...
Thanks!
I solved my problem by setting
outline: 1px solid transparent;
property for each animated block on the page. It was helpful.
I found this solution in this answer.
This might be a result of a bug that I have encountered. There are still quite a few of optimization problems when it comes to transitions, in any browser, but particularly Firefox.
Have you tried setting perspective: 1000; to the parent element? It's served as a quick fix to some of these problems.
Nice website, by the way!
After looking at Google's new /design, I was wondering if there's any way to accomplish a loading spinner like the one under /progress-activity (Scroll down to "Circular") with HTML / CSS?
I'm only talking about the animation itself. As far as I know it might be next to impossible to round the borders of the spinner like Google did.
I only managed to do a very (very) simple version of this spinner, but I couldn't figure out how to animate the "border" itself (like the spinner in the newest version of Android). Basically I just used border / border-radius: 50%; and an infinite CSS animation to rotate the HTML element (0deg -> 360deg): http://codepen.io/anon/pen/mqiCf
Or do i have to use an "old-school" .gif to get something similar to the "Android L" Spinner?
I think it'd be possible to achieve using SVG, providing whichever browsers you're targeting support the animations required.
I'd use two components: the partially-opaque "growing circle" effect at the start is one element, and the spinning circular outline is a second element.
The aspect which is impossible to achieve using HTML is having the length of the circular arc changing. In SVG, you can achieve that by using an animated stroke dash array. Here's an example of that.
I don't have time at this moment to make a better example, but this is a little closer. I tried what Shomz said in the comment, about using a white loader over the blue one. It isn't perfect, but play around with the timing a bit.
http://codepen.io/anon/pen/bBKJe
EDITED:
I have used tinymce editor to add text with external toolbar, Please look into it TINYMCE-DEMO
And everything is working same as i have mentioned below.
I have a transformed(scaled) div element with contentEditable="true". Now the problem is when I start typing on this div box then the blinking cursor sometime get hide in Firefox, but in chrome it is working perfectly. I don't understand what is wrong with this code.
Here is my code:
HTML-
<div contentEditable="true" id="textbox" class="scaleDiv">Add Text Here...</div>
CSS-
<style>
#textbox { width:400px;height:250px;background:#FFC0CB;word-wrap:break-word; padding:5px;}
.scaleDiv { -moz-transform:scale(0.5,0.5);-webkit-transform:scale(0.5,0.5);}
</style>
And Here is the
DEMO
If you move your cursor after typing from left to right or right to left then you can see the cursor - sometimes get visible and sometimes get hide.
Please Help...
It will be down to the use of different aliasing methods when scaling, or the fact that Chrome makes a concerted effort to keep the cursor alive. What is happening in FireFox is that at certain points the single vertical line (i.e. cursor) is being scaled away, this happens sometimes when using certain types of scaling, like nearest neighbour. This problem could be OS specific, I see it with the FF 26.0 on Windows.
For example:
Take this image:
And then scale it 0.75 (I've used PhotoShop and Nearest Neighbour here, but the principal is the same)
As you can see some of the lines have vanished.
Basically you need to look into if it is possible to change the type of scaling used in FireFox and with CSS. Sadly, from what I can see so far, it is only possible for images using the image-rendering css property or the Microsoft non-standard -ms-interpolation-mode...
There's possibly no straightforward solution for this, but any suggestions for a workaround or pointers to some documentation of this issue/ behavior is welcome.
Scenario:
If I apply a custom on-focus CSS style, such as:
:focus {outline: 2px auto green; }
Issue:
Parts of the outline still show on the previously active links even after focus moves away.
In the screenshot, the last link with the green outline is the currently active element. The rest of the links with small green lines around were active only previously.
These remaining bits of the outline go away after a few seconds on their own or when you drag the mouse over them (or disturb that area of the page in some other way).
Context:
I am working on a chrome extension for accessibility, and I need to set an explicit style to the active element. The reason I am hoping to use outline-style:auto is that 1) applying any other style except auto (like "solid", "dotted" etc) give another issue and 2) also, it looks better.
I am aware that outline-style:auto is not supported by other browsers.
Using Chrome 27.
You might check to see if an outline-offset is being set.
I had a similar problem, I was using Bootstrap and it was setting:
a:focus {outline-offset: -2px;}
Doesn't sound like you're using Bootstrap, but maybe something similar is happening for you. I changed it back to the default:
a:focus {outline-offset: 0px;}
that seemed to work for me. Hope this helps!
(Warning, outline-offset is not supported in IE: http://www.w3schools.com/cssref/css3_pr_outline-offset.asp)
I had the same issue. In my case, I set an outline and a box shadow. Both seemed to stick to the element.
When I added the outline, I also set the box position to "relative" to make it stand out. For some reason that I can't explain, giving the box a z-index of 1 (bringing it forward) when I set the position to relative completely fixed this issue for me.
I have some nav elements positioned with transform: rotate() and box-shadow. When you hover them they 'pop out' a little bit to indicate you can click on them. In Chrome and Safari (indicating this is a webkit issue) when you hover some of the nav items the box shadows go haywire and cover up portions of other random elements. It works fine in Firefox.
I made a jsfiddle portraying the issue as simply as I could figure out how to:
http://jsfiddle.net/Q39eJ/1/
Hover over and then out of the first one or 2 elements and you'll see the issue in action.
The site I'm working on has the issue here:
http://temp.go-for-english.com/
(URL will soon change to http://www.go-for-english.com if this one doesn't work)
If anyone can figure out a work-around that still utilizes CSS3 to make it look normal (Maybe set the z-index again on the hovers, or some other weird workaround that I'm not sure about) I'd greatly appreciate it :) I'd really rather not resort to images :(
UPDATE:
I've been informed it looks fine on Windows Chrome =\ I'm using Mac OSX 10.6, here's a screenshot of the behavior I see:
http://s9.photobucket.com/albums/a74/nZifnab/?action=view¤t=Screenshot2012-01-19at13205PM.png
My client has also pointed out the issue because they use Safari.
I figured out a bit of a work-around that mostly works. Found this stackoverflow question: How can I force WebKit to redraw/repaint to propagate style changes? related to forcing a repaint of elements using javascript. So I updated my fiddle with this code to force a repaint of the elements with box shadows:
$(function() {
$('.top-nav a').hover(function() {
redrawMe($('.top-nav a'));
})
});
function redrawMe(obj) {
obj.hide();
obj.each(function() {
this.offsetHeight;
});
obj.show();
}
I tried only redrawing the element that was being hovered redrawMe($(this)); but it didn't work, when any of them gets hovered, I need to redraw all of them. Appears to mostly do the trick but there's still some darker shadows that appear in the cracks between each element. I feel that this is acceptable and barely noticeable. jsfiddle with my proof of concept:
http://jsfiddle.net/nzifnab/Q39eJ/4/
Haven't updated that live site with it yet, but shall soon.
If anyone can manage to find a way to make even the shadows between each element disappear I'll accept your answer instead :)
Again, this may only be happening on MacOS X in both chrome, and safari.