I have a CSS3 transition set to trigger on an h1 element, whenever some JavaScript changes the class name of a containing element to include "active". To do so I have two CSS declarations:
#idname .classname h1 {
opacity: 0;
left: -1.25em;
z-index: 3;
position: relative;
}
Followed by:
#idname .classname.active h1 {
opacity: 1;
left: 0;
-webkit-transition : all 4s ease;
-moz-transition : all 4s ease;
-ms-transition : all 4s ease;
-o-transition : all 4s ease;
transition : all 4s ease;
}
This works beautifully in webkit browsers, but appears to be failing in Firefox. My suspicion is this is something to do with how I'm triggering based on a class name change, though I could be wrong. Does Firefox not allow you to do this? Has anyone got a good workaround? Thanks in advance for any help you might be able to provide.
My problem was resolved by adding a slight delay between adding something to the DOM, and then adding a specific class name to trigger the animation. 20ms was long enough for me to get it working in Firefox.
Related
trying to figure out what the best path moving forward as I'm not wrapping my default styling with a media query since i'm assuming mobile. However, for desktop im recognizing i'm styling selectors that aren't required for my desktop.
myclass {
background-color:#FF0000;
transform: translateX(-50%);
clip-path: //some kind of clip path
#include media(">tablet") {
background-color: initial;
color: initial;
clip-path: initial;
transform: initial;
}
}
This is just an example class, but i find myself having to repeatedly use initial to reset. Any other advice instead of also wrapping my mobile styling in a media mixin?
I have a requirement where when page is loading, i need to disable (All widgets in it should be visible but disabled) the page with faded(opacity) and enable only busy indicator . .
How can i achive that in gwt? Please help
This feature is called masking. There are many ways to do it. One of the way is to disable all the events by making all the widgets in the screen readonly and setting the opacity through css. Another way is use a transparent slight opaque image as a background with very high z-index property and remove that image when you no longer require it
After applying the following css style, masking is applied in all the browsers.
.maskingStyle {
background: #666666;
position:absolute;
left:0;
height:0;
z-index:10000;
display:inline-block;
width:100%;
height:100%;
opacity: 0.2;
filter: literal("alpha(opacity = 20)");
-webkit-transition: opacity OPACITY_DURATION;
-moz-transition: opacity OPACITY_DURATION;
-o-transition: opacity OPACITY_DURATION;
transition: opacity OPACITY_DURATION;
}
i came across an issue today and it took me so long to debug, I couldn't find a solution anywhere online so I thought it would be useful to document
It seems that transitions do not work on Firefox if the parent's "overflow" property is changed together with the transition - ie:
.parent { overflow: hidden; }
.parent:hover { overflow: visible; }
.child { opacity: 1; transition: opacity 1s linear; }
.parent:hover .child { opacity: 0; }
The transitions will not work on the child. Remove the "overflow:visible" property from the hovered parent, and everything is ok. It seems that changing the overflow on the child itself does not cause any issues, which is weird.
Here's a js fiddle for this http://jsfiddle.net/qzMj9/13/
does anyone know why this happens? is it a ff bug or the correct functionality? it works on webkit!
This looks like https://bugzilla.mozilla.org/show_bug.cgi?id=625289 to me: the parent is having its CSS boxes reconstructed, which loses the old computed style on the child, which means no transition start, since that's triggered by computed style changes.
I have a css3 animation running with the iteration count set to infinite.
based on a click event I want to stop the animation but changing the iteration count does nothing. can anyone suggest a better solution?
Thanks
Ian
Put your animation in a class sepeared from the styling, i.e.
.box {
height: 100px;
width: 100px;
background-color: #000;
}
.box.animated {
-webkit-animation...
}
and then remove class animated on click.
I have an absolute positioned div inside another absolute positioned div. The child div content is much bigger than the parent can contain. This is by design. I need the child div to spill out of its parent. It does so in every other browser except IE 8 (IE 7 looks OK, not sure) In IE8 the part of the child that is out of parent is clipped. It is there, but just not visible as can be verified by IE developer tools.
I tried z-index, tried explicitly setting overflow:visible, no luck at all.
UPDATE: I found out that the problem is caused by a filter defined in the parent div like this:
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#66C6DEA2,endColorstr=#66C6DEA2)";
Anyone has an idea how to work around that?
I solved it using this How do I stop internet explorer's propriety gradient filter from cutting off content that should overflow?
My solution is a little modified, just put an empty div with class "ie_rgba_fix" inside the container you want transparent, add this CSS someplace IE specific and the children will not clip anymore as with overflow: hidden
/* IE8 RGB A workaround */
div.ie_rgba_fix
{
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#66C6DEA2,endColorstr=#66C6DEA2)";
}
Try making the elements inside the absolute positioned element position:relative, and/or add a wrapper around all the elements in that absolute positioned element and relative it.
i took a tip from the checked answer here & the linked question, but didn't want to use an empty DIV (especially because other browsers don't need it).
Instead, i set up IE8-specific CSS that uses the container DIV's :before pseudo-element.
However, pseudo-elements are styled content, not DOM objects, so the -ms-filter property is useless. To compromise, i use a PNG matching the original filter i wanted (actually a data: URL, but either works) as the background-image.
i force the pseudo-element to the full size of the container, absolute-position it, and ta-da, the child element is visible outside the parent, and the parent still gets a transparency background.
.container.ie8 {
background-color: transparent;
position: relative;
}
.container.ie8:before {
background-image: url("data:image/png;base64,...");
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}