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.
Related
So I'm quite new to flexbox and I'm by far a real front-end developer. I'm working on a WordPress theme for an upcoming side project and currently I'm doing the HTML part.
I'm using flexbox for pretty much everything, and I'm having some issues with some weird flexbox behaviour.
If you go to http://hatch.tips/preview and check it in Chrome, everything seems to be alright. Mozilla is also fine except a weird border to the right of the compacted logo (resize browser).
On Safari, things go pretty haywire, so you should check that up.
I'd highly appreciate any help. First of all you might notice that I haven't used any prefixes for my code yet, but since Safari renders some of the flexbox stuff, I assumed that might not be the actual problem.
Flexbox is still "fairly new" so I recommend using the prefixers. It fix most of the bugs, especially in IE for instance.
See: http://shouldiprefix.com/#flexbox
On this website: http://escapology.com/ in firefox you can see an odd rendering bug as you scroll through the page. Certain elements will seem to not render the opacity correctly for a second or so and then be fine.
This hasn't always happened so I'm pretty sure it's avoidable but I cant figure out what exactly about the elements is causing it.
For the sake of answering a question thats here:
It turned out to be a bug relating to having multiple stacked objects with transforms. The solution was to fade them individually.
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 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.
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)