I have a pretty complex layout for my calendar script at http://www.clinde.de/cal/index.php and i used http://www.my-debugbar.com/wiki/IETester/HomePage this IE Tester. It works like it should in all IE version exerpt 5.5 and that's really impressive. If i use my IE 11 on Win7/64bit the hover effect is bugged. Works fine in Chrome and Firefox. Any suggestions to improve this to make it work in IE 11?
Related
I'm seeing some significant differences in how browsers are repeating sliced border images. It's easily demonstrated on https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-slice
MacOS 10.14.6 Safari 12.1.2
MacOS 10.14.6 Firefox 91.0.1
MacOS 10.14.6 Chrome 92.0.4515.159
So it appears that Safari on MacOS Mojave has an issue. Simple enough if that were the case. But mobile browsers on iOS are also behaving differently.
iOS 14.6 Safari
iOS 14.6 Firefox
iOS 14.6 Chrome
Does anyone have any insight into why these browsers behave differently? Does anyone have insight into how to get the un-stretched results in all browsers that MacOS Firefox and Chrome have?
Essentially, what you are seeing here is Safari behavior vs. the behavior of all other browsers, which sadly is a common frustration of many developers— Safari functioning differently and usually unexpectedly.
What you are seeing on iOS (mobile) is to be expected, because although there are different browser apps, all of them, even Chrome and Firefox are actually Safari (using the Safari browser engine, WebKit), simply reskinned with a different UI. There is only one iOS browser in actuality.
Supporting source #1: https://www.reddit.com/r/firefox/comments/9lpmkh/
As we all know Apple forces all third party browsers on iOS to use WebKit, essentially making them just re skinned versions of Safari; This puts Gecko Based Firefox and other Third party Browsers at a performance disadvantage.
Supporting source #2: https://www.quora.com/Is-Chrome-for-iOS-just-Safari-re-skinned
Google wasn't just being lazy using Safari's rendering engine. Apple requires people making browsers to use the UIWebView object. [This] means “exactly the same rendering engine”.
To be clear, this is a bug in WebKit/Safari. I have opened an official bug report to resolve this: https://bugs.webkit.org/show_bug.cgi?id=229803
This github link I encountered last time shows that border-image in safari is seems to be not solved.
https://github.com/Fyrd/caniuse/issues/2366
In my application, the primeface datatable is looking different in IE and Firefox. In IE, it looks a bit unprofessional. Below you will find the attached screenshots.
IE:
Firefox:
I checked Primeface's showcase and found that the default look in datatable is like that only.
http://www.primefaces.org/showcase/ui/datatableBasic.jsf;jsessionid=1qdz8fc102lqt16oiglwr9p6g8
But is it possible to do something with CSS Styling?
Gradients are not supported in old versions of IE, at least not at the standard way. Check this application. It will help you to generate CSS gradients that works on older versions of IE and also in IE9.
outline-offset:-5px. It is Working Fine in Chrome and FF and only in
IE showing issue.
How can i make possible outline-offset:-5px [Negative value] in IE. is there any alternate solution without using border ?
IE does not support outline-offset. And you should test it in opera too. becouse if i correctly remember Opera does not suppot negative values...
I'm a programmer for an online store so i visit hourly this website. One of my coworkers said to me that for her the website looks awful so i instantly tried on my pc. It worked great but now after 1 day, i updated my chrome too and it looks awful.
I realized the chrome version 28.0.1500.71 m is messing the website. I don't know what exactly but something with the styles. It's like they don't load or something (part of the style is not loading or something because some elements have styles some not... and it's a real mess).
I checked on multiple PCs, different OS's: windows 7 (64 and 32), windows xp (on 3 different pcs) (when i had the older chrome version all worked wonderfully but now, when we all updated it looks very broken)...
I tried on ie 8, 9, 10, firefox, opera, safari and they all work superb, like they have to but, on chrome version 28.0.1500.71, is not.
What can i do? It's not like it's my fault or something but how can i change so it looks right again?
Please visit this page and tell me how do you see it and please verify it with chrome version 28.0.1500.71 and with another browser to see the difference.
LINK REMOVED 2018 :) not needed anymore
Update:
I'll keep you updated on what i do so you don't have to try again but for now i uninstalled google chrome version 28.0.1500.71 m and installed google chrome version 27.0.1453.116 m to be sure this is the problem. What do you think guys? It fixed the problem. But, i want a fix for version 28.0.1500.71 m.
Update 14:44
Ill update chrome back to 28.0.1500.71 m to make screenshots so everyone can see but first i'll make some screenshots in this version i have now (27.0.1453.116 m)
Screenshots
good) chrome 27.0.1453.116 m i.imgur.com/bWfvwdk.jpg
problem) chrome 28.0.1500.71 i.imgur.com/bx6ttRB.jpg
problem) chrome 28.0.1500.71 incognito i.imgur.com/76NUyOn.jpg
good) Latest opera i.imgur.com/gqWd6OT.jpg
good) latest firefox i.imgur.com/ImTVtSI.jpg
good) ie 10 i.imgur.com/FwvZy5j.jpg
good) IE 9 (browser mode IE9) i.imgur.com/74bTmGR.jpg
good) IE8 (browser mode IE8) i.imgur.com/KKqE997.jpg
good) Safari i.imgur.com/qWI0Wos.jpg
SOLUTION
Big big thanks to #Zenith
He sayd that google chrome changed the webkit so i analysed the css and found
#-webkit-keyframes blink {
from {
opacity: 1;
}
to {
opacity: .5;
};
}
I just removed it. Now it works perfectly. Thank you.
I am a little new to CSS and CSS animations. I am tired of optimizing my webpages specifically for IE (all versions). Is there some javascript library of something of the same sort that can enable CSS -webkit syntaxes in IE?
I find it easy and good designing for webkit browsers like chrome but IE needs special focus.
Thanks in advance.
The Internet Explorer 10 supports some more CSS3 features. Did you to obmit the prefix? If this doesn't work there is nothing you can do. You may need to wait for the Internet Explorer 11.
However I would not recommend to concentrate your work for the IE. Better try to make run your app on Firefox, Safari, Opera and co.
Have also a look to the blog post Adapting your WebKit-optimized site for Internet Explorer 10 by Microsoft.
have a look at css3pie.com it can render as from IE6. Hope this helps you.