This question already has an answer here:
SVG animation bug in safari 11
(1 answer)
Closed 5 years ago.
I have a basic SVG log, and embedded in it I have some simple CSS animation. It's rotating an object, and making the middle of the rotation the center of the object.
It looks and works fine on Chrome / Safari in iOS10, but when you open it in iOS11 Safari the rotation is completely mad.
Can anyone help suggest why / how to fit it?
The logo can be seen here:
http://www.mediplacements.com/live2/img/logotest.svg
When something seemingly standard work on older browsers and not in newer ones, you should check for your element's adherence to standards.
The W3C validator indicates there are 3 errors in your SVG; you should try again after fixing them.
Edit: Okay, now that it's fixed. Have you checked SVG animation bug in safari 11 ?
I just tried what's suggested in the linked question, and it fixed it.
Simply add transform-box:fill-box; to your Swishes' CSS.
It tells Safari to behave like Chrome on an undecided point of the standard, namely whether transform percentage values refer to the bounding box or the parent.
FYI, the problem you describe also happens on Firefox.
Related
This question already has answers here:
CSS customized scroll bar in div
(20 answers)
Closed 7 years ago.
I want to customise the scroll bar.
According to this: http://webdesign.tutsplus.com/articles/quick-tip-styling-scrollbars-to-match-your-ui-design--webdesign-9430
you can do it using -webkit-scrollbar. However I cannot seem to find anywhere which browsers support this feature including caniuse.com.
Can someone please tell me where I can find out which browsers support this feature!
As it says -webkit- I assume it works on safari and chrome. But even then which "versions" of these browsers does this work on? What about andriod/ chrome mobile browsers .
Thanks!
You can for IE and Webkit browsers but Firefox would require a JS solution - and if you bother to do it in JS, it doesn't really need you to do it in CSS as well.
An example of a JS scrollbar jQuery plugin.
Edit: Mobile browser - you apparently can style these but I haven't noticed them styled at all, nor did I even know my phone had scrollbars until I just checked. This plugin seems to be able to style them.
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 created a flipbook animation and have tested it in Chrome, Firefox, and Safari, and you can see it in action here:
http://codepen.io/tcmulder/pen/omyuE
Unfortunately, it isn't working correctly in Safari because after the animation concludes, z-index seems to lose it's power and the leftmost page repositions itself at the top of the stack. It may be related to the issue found here:
css z-index lost after webkit transform translate3d
but the solution suggested doesn't work. I also played around with using rotate3d to change the x coordinates to trick it into a sort of pseudo-z-index overlay, but this doesn't seem to work well either.
How can I get Safari to preserve z-index after the animation concludes?
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.
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%.