I'm testing the blur effect -webkit-filter:blur(5px) which seems to work only with Chrome.
But I've found this:
http://vectorflower.com/preview/trans_banner/
I dont know how they do it, but works with Firefox and Internet Explorer.
Does anyone know how they do it?
I thought they were "cheating" with 2 images, but the console shows only 1 request per image.
The css filter specification is pretty new and is not supported yet in IE or Firefox.
http://caniuse.com/#feat=css-filters
The example you linked to uses the canvas to draw the blur effect directly.
Related
I've got a fancy css neon effect on a navigation. This works perfectly on any major browser except on IE < version 10.
The problem is that there is no text shown on IE 8+9.
I have no Idea where to start with a fix so I would be very grateful for every tip.
It doesn't need to be working with IE8, IE9+ would be fine.
The effect can be found on the page http://www.arch-on.ch/team/philosophie/
Many thanks in advance for any helpful input
CSS property text-shadow is not supported by either browser (IE8, IE9) and box-shadow is only supported by IE9
You best solution is just not to have the glow effect in those early browsers and give users of those browsers a warning that the site looks better in a modern updated browser.
To achieve what you want in those browsers you would have to create transparent png images and swap them out on :hover. But this because real messy (especially when you have to keep adding new text or change text) and is not efficient.
Do not create more work for yourself with something that just applies to aesthetics.
Try Quirksmode for before: and after: content: http://quirksmode.org/css/user-interface/content.html
There is also a plugin called CSS3Pie that "makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features". Maybe implementing this is okay for you. http://css3pie.com/
Otherwise you have to avoid using CSS3 if you want to go down to IE8. Check this chart for browser compatibility of CSS3 statements:
http://www.normansblog.de/demos/browser-support-checklist-css3/
Cheers
Frank
I'm working on an animation using packery. Tiles are aligned in a grid and clicking on one is supposed to enlarge it and dynamically rearrange the tiles accordingly. The resizing is animated using CSS3 transitions. All of this works as expected in IE10 and Firefox, as demonstrated in the following codepen: http://codepen.io/anon/pen/ilkmK
The same code in WebKit-based browsers (tested on Windows) produces a frantic wiggle / shaking of the box as it is resized and repositioned.
I already submitted an issue and the problem seems to be that width and height transitions in WebKit are not optimized. Implementing the same animation using jQuery.animate improved the situation a little bit, but it doesn't get rid of the wiggle. Especially on slower systems it remains very noticable.
For now I'm using the JavaScript version as a slightly better fallbackf or webkit browsers, but it's not optimal. I have no idea where to go from here, so I was hoping Stackoverflow could help me out.
For any hints on how to make this work in Chrome/Safari, I'd be very grateful.
I just tried this in Chrome on mac and it's working fine, so I can't replicate the problem. However I have a feeling this might be to do with the fact that when webkit browsers load a page they initially generate images with 0 dimensions.
Try putting your jQuery in $(window).load(function(){ instead of $(document).ready(function(){
That would wait for images to load before executing the script.
I have been working with changing the background colour of an element using css3 animations. However it does not work in Chrome. I have attached a jsFiddle example of the code I am using. It works in Firefox, but not in Chrome and despite my best efforts I have been unable to work out what the problem is.
In chrome is seems to ignore the reference to background-color only. If I move the item or apply any other effect to the element it works fine.
http://jsfiddle.net/qWKEs/6/
Thanks in advance.
This is a bug in chrome. Should be fixed in version 18 as per http://code.google.com/p/chromium/issues/detail?id=101245
I had this same issue using the background property in Chrome with CSS3.
However the version of Chrome is 21.0.1180.83 (up to date as of 8/24/12) so the problem still exists.
I resolved it by specifying background-color instead and that works fine.
Interestingly enough the W3C says it's only supported in version 1.
I am getting this display in IE 7
I am getting this display in Firefox:
for the following code
Could anybody point me, What I should do to make the IE Display simalar to Firefox and also, How Do I make the Size should be same for all the headings?
Internet Explorer does not support gradients, shadows, nor border-radius properties. border-radius is supported in IE9, but this won't be of much help!
You can look into CSS3 Pie, which uses IE-specific .htc files to achieve almost the same effect.
For now, if you really need to be fully compatible with all IE's (and other browsers for that matter) I'd use an image. It's not very nice but at least you can rest assured that it will always work ;-)
Rounded corners and drop shadow aren't going to work in IE7 without a lot of clever image tricks. You can't fix it through CSS alone.
Alternatively you could probably find a JavaScript plugin which would create these effects for you if you don't mind taking that route (see curvy corners for example).
I have a simple html page in an iframe that I am trying to scale with an html5 input range slider. it creates a white border inside the iframe, what looks to be a doubling side effect.
It works perfect in chrome(6.0.472.59 mac), but not in safari (5.0.1 mac).
here is a link to live demo - http://dl.dropbox.com/u/1031653/safari-bug.html
Any sort of suggestion on why this may be happening? hardcore hacks are fine if need be.
This appears to be a Safari bug. I would recommend reporting it at https://bugs.webkit.org/
I'm seeing this bug in Chrome as well (version 11.x.x)
One solution is to go into the IFRAME's document (assuming you have access) and set the size there. Something like this:
$('iframe').contents().find('body').css('-webkit-transform', 'scale(0.5)');