The animation on this MDN page works in Chrome, but not in IE10.
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onanimationend
I am asking because my own animation (much more complicated) works fine in Chrome but not in IE10. Thanks for any help.
After some more research, I kinda-sorta know the answer.
My code fails because when I write a replacement style sheet using the techniques described in the mdn article below, it works in Chrome but not in IE10. When I don't rewrite the style sheet, but use the one I started out with, it works.
https://www.w3.org/wiki/Dynamic_style_-_manipulating_CSS_with_JavaScript
The "Accessing style sheets" section.
I'd still like to know why IE10 behaves this way.
Related
L20n is really helpful when it comes to implementing a localization requirement in our web application project and works perfectly fine in Chrome and Firefox and almost gets us there in Internet Explorer 11.
We are using HTML (which is supported) in the translation strings, they are formatted like this example:
"About <strong> a </strong>"
It works beautifully in Chrome and Firefox:
Translation result in Chrome
Unfortunately when I switched to Internet Explorer 11, getting this lovely sight on the same part of the page:
Translation result in IE 11
We're not doing anything weird or super special, it's pretty basic implementation.
Question is - has anyone encountered this issue while working with l20n and if so - is there anything that can be done to get Internet Explorer to render tags in translation strings?
After help from #Sampson (cheers!) and pointing out that a) It was issue on IE11/Edge Mode not Edge b) IE11 does not support one of the HTML5 elements such as Template, I dug around a little bit before I was about to announce complete defeat and digging through l20n github pages:
l20n compatibility
Using babel polyfill
Using patched webcomponents HTMLTemplateElement polyfill (link provided on page
I added babel and modified polyfill js file and after quick deploy and nervous refresh, it appeared the solution worked. Testing it as we speak so that it doesn't cause issues with the app but all looks good so far.
I know this is a workaround but our IE traffic is small enough yet I was not able to give up on these users that would like to use what I am currently working on in Irish and coincidentally would end up using IE11.
Due to the lack of support for the <template> element in Internet Explorer 11, the following fails:
// https://github.com/l20n/builds/blob/0d58a55afa6ae5aa868b8002fae5ee0e2124e35d/l20n.js#L94
var templateSupported = 'content' in document.createElement('template');
It's worth noting that the l20n.js team doesn't consider IE to be supported.
It's the first time that I meet such a problem with transitions.
None of them is working on Safari, although they work perfectly fine in firefox and chrome.
http://www.custom-design.ch/_stack/predentec/
I used compass transition mixins, as I always do, so there really shouldn't any problem.
Do you have any idea or track to follow?
Thank you in advance for your help!
Hum, I found the source of the problem, where it absolutely wasn't expected.
This was due to the new version of livereload (2.3.27), that makes apparently different results while exporting CSS code.
I then downgraded to v.2.3.20, and everything was ok, as it has always been!
I wrote to the support of both Livereload and compass to see where the problem comes, but without any answer for now.
when testing my website using Opera Mobile, I discovered some serious problems which I've no idea why they happen and how to fix them.
Here's a comparison between FF (Windows) and Opera Mobile (FF renders as expected):
Here's the jsfiddle with the source
Here are the differences:
1st image looks weird.
4th image disappeared.
Images has partially/missing border-radius.
box-shadow is missing.
I'm pretty sure that the box-shadow and border-radius are the main cause for the problems, because when removing them everything looks fine.
I would like to know why it occur and how to fix it....
Thank you very much!
When you are removing opacity does it work better? It seems there is a very unfortunate bug mixing box-shadow and opacity. And it is tracked by CORE-39908 at Opera. I will add your example jsfiddle example to the bug report.
I am using VS 2008. I like the feature maintainscrollpositiononpostback. It works fine with IE 8. But it does not work consistently with Firefox. Sometimes, instead the line I click on goes to the bottom of the page. The field I am trying to refresh is with a div tag with overflow set to auto. Also I have several update panels with updatemode set to conditional. This means only the panel affected should be refreshed. This is also not working in the case on Firefox.
I have searched the web for possible solutions but none of them work for me.
Most of my users use Firefox so this is a problem for me.
Thanks in advance,
Bob
scrollsaver to the rescue?
http://en.hasheminezhad.com/scrollsaver
I found this little js file a few weeks ago after implementing Post/Redirect/Get on a few of my pages. It may enable you to turn off maintain on your pages if you throw it in the master. I haven't fully tested it with ff4/5 or chrome...
Edit the Browser Capabilities file, and explicitly set it so that MaintainScrollPositionOnPostback is supported on Safari Browsers.
you can use javascript for this.. chek it out..
http://weblogs.asp.net/andrewfrederick/archive/2008/03/04/maintain-scroll-position-after-asynchronous-postback.aspx
This is working in Chrome but not in Safari:
background: -webkit-radial-gradient(center, ellipse cover, #fdfdfd, #d3d3d3);
How can I fix it for Safari?
It doesn't even work correctly in Chrome, as it shows a circular gradient, not an elliptical one. It does work correctly in Webkit nightlies.
The reason it doesn't work in Safari is that the syntax hasn't propagated yet to a stable version of Safari. Eventually it will. You need to learn patience my young padawan :)
For now, you may use -webkit-gradient, but always include the -webkit-radial-gradient equivalent after it. And while we're at it, don't forget the other prefixes too (-o-,-moz-,-ms-)
Try using for Safari:
background: -webkit-gradient( radial, <point>, <radius>, <point>, <radius>[, <stop>]* ) <color>;
Examples and more explanation can be found here: http://www.the-art-of-web.com/css/radial-gradients/