This effect works fine in FF but not Chrome- the Firebug results in Chrome show that the '-webkit-animation' aren't rendered in Chrome. In Firefox however, you see the'stretch' effect on entrance of the object. In Chrome, the object doesn't scale at all.
http://jsfiddle.net/AfDwu/5/
You are not specifying the properties of the -webkit-animation, only the name.
Replace:
-webkit-animation-name: ooze
With:
-webkit-animation: ooze 2s 2s ease-in-out;
And it will work
Related
I have big problem. Tried almost everything and it still doesn't work properly.
Everything works fine in Opera, but in FF and IE images aren't responsive. I mean they are displayed with original dimensions instead of fitting a div (like in Opera).
Here is the link: http://gksolutions.pl/oferta/strony-internetowe
Any help my friends? I literaly wasted 2 days on it already. It's not bootstrap, just a simple grid system.
How does it look in FF and IE:
How it looks in Opera
Basically images aren't scaling properly in FF and IE, although row div is set to 350px height and img is styled with:
max-width:100%;
height:auto;
The problem here isn't with the images, but with the display: table; and display: table-cell; on the parent elements.
As far as I can tell, adding table-layout: fixed; after display: table; (in .element .row .row_inner > div) solves the layout problem.
See https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout for more information on what table-layout does.
I see no problems in IE11, but if I'm understanding you right, just use images as div backgrounds (css background-image) and everything will be fine.
I have a small problem with z-index on my site http://süperb.de.
In the header there are four links in a div with z-index:99. Under them there is the logo with z-index:1.
My problem: the links are just completable clickable in FF. In Chrome and Safari the z-index doesn't work and they are not completable clickable.
Help would be great.
The problem seems to be that chrome does not calculate the width and height of the A tag properly, try setting { display: block; } on the surrounding a tag, if that doesn't work, you might have to set a width and height on the a tag aswell.
I've implemented an Iframe Like box, but the vertical scroll bar does not show. (The generated code set scrolling to no, but I've now changed it to yes, but still it does not work).
The code is as follows:
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FChristopher-Carter-Veterinary-Surgery%2F332086710515idth=300&height=590&colorscheme=light&show_faces=true&border_color&stream=true&header=true" scrolling="Yes" frameborder="0" style="border:none; overflow:hidden; width:300px; height:590px;" allowtransparency="true"></iframe>
The problem occurs with I/E but not with Safari, Firefox, Netscape or Chrome. It seems as if this is a Windows XP / IE8 issue, but if anybody knows differently, I'd be pleased to hear from them.
You have overridden the scrollbars in the style clause;
overflow: hidden;
However, it has the opposite effect, IE will correctly render as-is, but firefox etc will not render the scrollbars. Fix that with;
overflow-y: scroll;
Having style overflow:hidden; seems to me like a contradiction to scrolling=Yes.
At the risk of stating the obvious:
Have you tried:
overflow:scroll
I have a CSS transition set up on an element, with all properties being affected. I don't know ahead of time which CSS properties will change, so I have no choice but to use "all" despite the performance issues.
.a {
transition: all 0.5s ease-in-out;
}
However, I want a specific property to have its own transition settings different from every other property:
.a {
transition: all 0.5s ease-in-out, margin-top 5s linear;
}
According to the W3C grammar for transition-property, other values should be allowed after 'all' is specified.
However, this doesn't seem to work in Firefox (18) and Opera (12). It works correctly in Chrome/Safari (with prefix) and IE10.
Here's a fiddle demonstrating the behavior: http://jsfiddle.net/F7tb5/3/
Is there a way to get this to work in all modern browsers without manually enumerating all properties that could possibly change?
That is a bug in Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=835007 (similar question: 14533519 but was recently fixed for the Firefox 21 milestone. Until then, you can't use all as part of multiple transitions and have to specify every property separately.
To be fair though, only the most recent W3C draft explicitly states this behaviour; earlier versions were not very clear how this case should be handled.
I had a similar case and the work-around was to create a wrapper element that animates all properties that are known before and leave all for the actual elements:
.wrap.a {
transition: margin-top 5s linear;
}
.wrap.a .inner {
transition: all 0.5s ease-in-out;
}
I got this animation using keyframes that is not working in webkit or IE10 (doing those first). Am I doing something wrong?
Thanks for your suggestions guys!
I don't know about IE, but -webkit-animate isn't a valid property. You need to use -webkit-animation.
Demo: http://jsfiddle.net/pmfzh/2/
Hereb is the correct CSS. Change animate to animation
div.run:hover{
animation: bounce 2s;
-webkit-animation: bounce 2s;
}