I have the following code in my website which will animate two background images, transitioning them over one another and from left to right - http://codepen.io/anon/pen/pJKmn/.
Modifying the HTML and CSS from the codepen, how would I be able to implement a cross-browser and device solution to work not only just in Opera and Firefox Mozilla, but also Internet Explorer, Google Chrome and Apple's Safari?
Just add browser prefixes like this http://codepen.io/anon/pen/eryni/
Related
I am coding a react application that displays an animation for a moving color within a div when a user clicks. I do this using a div inside that changes its inset-inline-start and that has a transition: all 0.3s ease. I am using MUI, so it auto-fills -webkit-transition. For some reason, the animation doesn't show up on chrome for android.It works perfectly fine in my computer's devtools and when tested on an iPhone, and on my android device with firefox, but not on my android device with chrome...
I tried replacing inset-inline-start with left, removing other properties like pointer-events: none, and more - to no effect... I tried updating my version of chrome, tested on other androids - and it doesn't work on any android device.
Here is what shows up in my devtools:
(I am using stylis-rtl-plugin, which is why the .muirtl-...)
The inset-inline-start property changes correctly and the box moves, and in the other scenarios it animates nicely and moves from place to place, but not on chrome with androids...
Would really appreciate help - can't wrap my head around why this is happening...
I'm going crazy with this homepage: http://faboola.it
The boxes with the icons/links below the hero image work fine on chrome and FF, but don't render in Safari (desktop, 11.02). I tried removing every animation, replacing SVG with PNG, but doesn't work.
Using Wordpress with WPJoints/Foundation 6.3
Any ideas? Thank you! :)
Ok, it has to do with the Motion UI animations on the DIVs. Removing the animation from CSS seems to fix the problem. Looks like a bug in Motion UI on Safari:
https://foundation.zurb.com/forum/posts/54883-mui-series-safari-11-compatibility
https://github.com/zurb/motion-ui/issues/97
I removed the animations. :(
I am helping a friend with his site and I am using IE, Chrome and firefox as well as safari to make sure the site is multi browser compatible. Chrome, IE and Safari all show the menu to be as it should but firefox adds 10 pixels between the menu and the slider. I tried to find the source of the error using chrome and mozilla developer tools, and I cannot see where it is comming from. Here is the link
Adding a negative margin to the div containging the slider resolved my issue.
I have an apple like coverflow element built using CSS3 transition and 3D transforms.
http://jsfiddle.net/7eDkb/1/ (Transition with box-shadow)
Works smooth on chrome, but on firefox, the covers are flickering between being visible and invisible when they are being animated.
After an elimination process, i have found that removing the "box-shadow" css property from the items results in smooth transitions in firefox.
http://jsfiddle.net/7eDkb/2/ (Transition without box-shadow)
I have tested this in firefox v15 and chrome v21.
Is there a solution to having both 3d transitions and box-shadow on an element without it flickering on firefox?
EDIT: in the fiddles, click gray images to see flickering
There is a good reason no one answered this question yet, It's a firefox bug.
I've submitted this to bugzilla, and it was confirmed as a bug.
https://bugzilla.mozilla.org/show_bug.cgi?id=790239
As #Kyle stated in his comment, the current best solution is to use a non-elegant alternative to box-shadow in the case of firefox.
I cannot make the image a background image to a div and round the div's corners because the image is resized, and as far as I know, you cannot resize a background image.
What are my options, if any? Open to all suggestions including wrapper divs and corner images.
Also, if it cannot be done in IE but there's a solution for Firefox, that's just fine with me.
If you're re-using the image and it's varying in size, you should be chopping up your corners accordingly if possible. I had a quick look for you, and here's a site that shows you how to achieve it using sprites. This increases your markup because you need to use positioned divs to position each section of the box.
Of course, recent versions of Firefox, Safari, Opera and Chrome support border-radius which allows you to create rounded corners without using images. IE9 will support this too, when it gets released.
I've seen sites that use border-radius and just leave it at that, so the borders aren't rounded in browsers that don't support it.
If you're interested in creating corners in IE then this may be of use - http://css3pie.com/
The jQuery corner plugin is what I use. You can do:
$('#div').corner('10px');
I am not sure, but maybe you can achieve what you want by using svg backgrounds. This will not work in IE.