I want to have a vignetting effect on the background of a page I´m building. This is the page:
www.karolinadahl.se
I managed to get the effect I´m looking for in Firefox, and it seems to work ok. In Safari I get some kind of vignetting, though not quite what I´m looking for and the inset shadow slows the page down tremendously for some reason. Im using Safari 5.
I don't think it works in Explorer at all and I don't know about Chrome and Opera.
Is there a smarter way of achieving this effect on the background?
You're applying the effect correctly, however, these effects are
Not fully supported, which explains your problem with IE
Known to render differently from browser to browser
Still, time is on your side. Support will only improve. For a web-site still in development, I'd say stick with the CSS3 techniques rather than older, hackier solutions.
You could also try a gradient in the background. Might be more consistent.
Related
I am trying to implement some css3 involving 3D transforms in a new project i am working on.Although i managed to overcome the limited InternetExplorer support i am having problems making Firefox work.
There seems to be excessive flickering when transforms take place either i use the rotateY(deg) or rotate3d(x,y,z,angle) method and only in Firefox. In Chrome or even in Internet Explorer they work fine.
You can see what i mean in the JSFiddle here.(Hover on the divs to see effect.)
Is there a way to fix and still have a 3d effect that will work in all three Firefox,Chrome and IE?
Edit2: I can confirm flickering in Firefox version 26.0.
You could look at this question Here for other possible ways to prevent flickering.
Edit: I apologize if this isn't much of an answer. I would have commented, but I'm not permitted to.
Edit3: The flickering for #test3d is extremely bad. The animation is rendered completely unviewable and seems to back-track several times before finishing.
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 a UI where the navigation is over a blurred set of images (blurred using webkit blur), and whenever the navigation moves, theres this strange almost ghosting effect that happens. After you click away onto another element, the ghosting also goes away.
Any advice on how to solve this?
On Mac Snow Leopard:
Chrome 19.0.1084.56
Safari all of them, including 6 beta
It seems that you are encountering a browser/engine dependent issue.
Chances are : you can't solve it by yourself aside from not using blur, or the like.
Not that this bug might not impact all users, depending on the version of the webkit they are using.
Hopefully the problem will be corrected in a future version. Maybe try to contact webkit guys, but that's really all you can do (aside submitting a patch).
Webkit is an awful renderer in my opinion. As a web designer/developer, I take into account how my design looks at every magnification. Webkit handles this extremely poorly. Margins, padding, and borders all get rendered extremely poorly across various magnifications and there is no CSS you can use that is "cross-zoom" compliant in WebKit. Zoom in and out of any webpage in IE, Firefox, Opera and it is consistent. Take a look at this site, for instance:
http://development.mminc.co/davidphotos/
Try using the carousel at the bottom at different magnifications in IE or Firefox. Works fine, right? Now try the same thing in Chrome or Safari. BOOM! A developer's nightmare! Please, if anyone knows of any tricks of the trade to get Webkit to behave with something that even Trident is able to successfully do I'd like to hear it. I've heard of a jQuery zoom plugin, but that is sort of a last resort. I've looked everywhere for the issue but no one even mentions Webkit zoom issues. It's like it's taboo or something. Personally I think it's one of the biggest blunders of the modern browser era, especially when such a (otherwise) great browser like Chrome is giving me more trouble with presentation issues than IE7.
EDIT: I feel I should be more general and use an example where it is obvious only HTML and CSS are implemented.
http://www.gamespot.com/
Webkit forces a line-break with the top menu w/ zoom tests, but other browsers don't. It is a major issue with the engine and if there are any concrete solutions I'd like to hear them. If there isn't then I think this issue should be addressed and resolved immediately; it is an eyesore to users and a nightmare for developers. The fact that it isn't addressed anywhere on the net is troublesome.
This isn't answering how to fix WebKit zoom issues in general, but it should help with your specific problem.
You're using jCarousel.
Even the simple demo shows the same problems you describe.
So, that plugin is simply broken when it comes to zooming with WebKit browsers.
You could either ask the author of the plugin for advice, or find a different carousel plugin.
For instance, this one doesn't seem to have any problems when you zoom in using a WebKit browser:
http://www.thomaslanciaux.pro/jquery/jquery_carousel.htm (look at the "dispItems" demo)
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).