Good morning all.
Today I'm struggling with the following code: source on jsFiddle
What I have been trying to achieve is a seemingly simple image rollover effect where 'a mirror' of an image covers the original one using some css3 effects.
Chrome 12 transforms the image perfectly
Firefox 5 stops transformation when the image runs into mouse cursor
IE9 - there is no transformation at all, the image is just shaking
Opera - not checked
How do I do this cross-browser compatible?
I think I got it to work in Firefox 5 the way you want. See http://jsfiddle.net/X2eN6/7/
According to CanIUse.com, IE9 doesn't support CSS3 Transitions, so I guess that's why it's not working for you in IE9.
The browsers that support the feature are Firefox (from v4), Chrome, Safari and Opera. But it's worth pointing out that transitions currently require a vendor prefix in all browsers that support them.
A vendor prefix means one of two things: either the spec is not finalised yet, so the feature is subject to possible change in syntax, or else the browser's own support for the feature is not yet considered complete.
Chrome has been supporting transitions for ages, so it's no surprise that everything works there. Firefox has only recently added it, so since they require a vendor prefix, you should take that as a warning that things may not be guaranteed to work 100%.
Related
I've been enjoying using these effects and I don't mind them gracefully degrading in older browsers, but Internet Explorer 11 and Edge 12 still don't support them.
This isn't the first time Microsoft avoids adopting specifications that are widely in use everywhere else.
I understand Edge was a big project and the IE browser was also re-worked from the ground up in IE8/9, but it sometimes almost seems like IE/Edge deliberately makes things difficult for designers and developers in the lack of continuity between it and what other browsers like Firefox, Chrome and Safari are adopting.
Are there reasons for this that I'm failing to recognize?
CSS Filter effects are supported as per https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/dev-guide/css/filter-effects/
I have seen them on my own website https://trajano.net/ except for one scenario that is Do CSS Filter Effects work when position:absolute in Edge?
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 not allowed to delete this question so just ignore it
In IE10, quirks mode, gradients now -ARE- appearing without my having to change anything. This is using the DXFilter, which I don't understand as the option is switched off and according to microsoft DXFilters now don't work in the internet zone?
(I missed out the 10 on IE10, question may make a little more sense now)
We have a site that is in IE6 quirks mode, it represents 10 years+ of development, has over 100 pages and realistically can't be changed without months of effort.
I need a css equivalent of gradients/addCone. At the moment I have a lot of info on the page, this cone appears in a tablecell, perhaps 20 of them. I looked at SVG but not sure thats a good fit as it seems quite verbose
Graphically I just want a gradient and a ball in the tablecell
It's arkward because if it was not in quirks mode we could use css3 but I don't think those features are available in quirks mode, but DX Filters have been taken away anyway
Any suggestions?
thanks
(addition, just found http://css3pie.com/ and a gradient of some description is appearing in quirks mode in IE10 so fingers crossed)
Ok, heres what I found
IE10 has withdrawn support for DXFilters, but you can put them back on in the browser. This can be set as a group policy
Internet Options-> Security-> Internet -> Custom Level -> Misc -> Enable Legacy Filters
SVG doesn't work in quirks mode, even if it did it wouldn't help as I need a graphical effect in HTML but SVG in IE10 doesn't allow mixing (it does in other browsers)
Gradients are in IE10, again don't work in quirks mode
css3pie implements gradients as (I think) VML, and it appears to work. The only thing you might have to tweak is to use position: relative in whatever container you're putting the CSS on
Here is a code, which was supposed to display 6 columns equally distributed across the container's width:
http://jsfiddle.net/fstyh/
BUT:
IE10 (both pp2win7 and pp4win8) and Opera 11.60 clump such columns together in weird manner (like region flow), while IE9, Firefox12 and Chrome17 just stack them one after another.
Which browsers are correct ? IE10 and Opera, because they are newer ? Or Chrome and Firefox, because they have bigger market share together ?
Before you answer, check what happens in Opera, when you add some text to those columns. (it's transparent, but works just fine to show effect). IE10 does not react to it, in any way.
I was not able to find anything in the spec. Hopefully, anyone can help.
Oops, it turns out that both mozilla and webkit still need vendor prefixes for multicolumn properties and values.
http://jsfiddle.net/fstyh/1/
Should i check in all? or in any one is enough because all share same rendering engine Webkit.
My question is related to HTML CSS rendering.
I know one difference Safari for windows and MAC both have Font smoothing (anti -alisaing)
Is there any other differences?
There's definitely a difference between Chrome and Safari due to Safari's font rendering. In Safari text tend to be a bit bolder due to the anti-aliasing algorithm and can sometimes take up a few extra pixels on the screen.
Also keep in mind that Safari uses the SquirrelFish javascript engine while Chrome uses V8.
I have found a difference in the way Safari and Chrome select SELECT boxes. I think Chrome seems to ignore line-height whereas in Safari line height seems to make a difference.
Safari Windows 5.1.7 v's Chrome Windows Version 22.0.1229.94 m
I think this is to do with the default user agent style?
I would check, yes.
Whilst the browsers all use the same rendering core, they're not necessarily on the same version (and there are multiple versions of Safari out there in any case).
Also, as slebetman says, font rendering is quite different depending on OS and anti-aliasing settings too, so you need to be aware of that.
Shadows are fast&ugly in chome; slower&prettier in safari (and firefox). IIRC there was some difference in CSS3 transitions too - but really, these details are still in flux anyhow and change from version to version.
In practice, I only check one of the two regularly, which is generally fine. Before putting major changes online, it's obviously not a bad idea to check again, but during development, it's not worth the hassle; they're so similar anyhow...
There are major and minor differences. Do check!
Minor: full support for CSS3 border-radius in Chrome. I've read about, but can't find, this in Safari.
Major: zooming in Chrome zooms everything. (This is the behavior in almost every browser.) Zooming Safari zooms text but leaves other things unchanged. Your ever-so-carefully-laid-out form is highly likely to be trashed if the user zooms in. Leave lots of extra space.