so my Website broke. It works fine everywhere except in Safari.
At first I thought it was a mistake during an update - but then I remembered I had an older Version of it (I know this had no displaying issues what so ever) and tested it with Safari (8.0.5 | and mobile)
THE SAME PROBLEM APPEARD.
I have no idea what went wrong.
the page I am talking about. www.platzhirsch.wien
please help
EDIT: This might have appeared after the recent automatic wordpress update
In the CSS you need to use:
display:-webkit-flex; /* for Safari */
display: flex; /* for others */
and add the -webkit- prefix to any other flexbox properties you are using. e.g.:
-webkit-flex-direction: row-reverse; /* for Safari */
flex-direction: row-reverse;
Related
I'm using gulp with postcss/autoprefixer and have the browserlists list set up as a .browserslistrc file and that's all working well but when it comes to Safari and using flexbox I'm still getting this issue...
Safari then completely ignores flexbox as it seems to have an issue with the display duplication. I have the browserslist query set as Last 2 versions.
Any thoughts?
Ran into this issue myself, ended up playing around and figured out if you put the css properties in the correct order it seems to solve the problem:
display: flex;
display: -ms-flexbox;
display: -webkit-flex;
The latest compiled css for Bootstrap V3.3.0 (and at least the previous version) contains some unusual syntax for the line-height in a few places. Can anyone explain it? Needless to say, it causes Resharper to spit the dummy...
input[type="month"] {
line-height: 34px;
line-height: 1.42857143 \0; <<<-- here. the '\0' is what bothers me
}
You will find it around line 2408 in the css.
Also noteworthy is the repeat definition, with and without units. What browser 'feature' does this rectify?
See this issue on GitHub and this question on SO
Its a CSS hack specific to IE, it will only apply to IE10 and under. \9 would apply to IE9 and under etc... All other browsers will ignore it and keep 34px line-height.
my app use appcache, when trigger history.back() in safari(Ios7), it dose not work. After remove appcache minifest, it works, I can console in 'statechange'.
This is due to a bug in Safari 7+ when using AppCache. Only known solution at this point is disabling AppCache.
See history.back() doesn't work in Safari on iOS
it is a terrible bug! I use this fix:
if (
(/\bSafari\//gi).test(window.navigator.userAgent) &&
(/\bVersion\/7/gi).test(window.navigator.userAgent)
) {
window.console.warn('removing appcache');
window.document.documentElement.removeAttribute('manifest');
}
I have some reports of back buttons still not working after this fix, but everywhere I tested it does work. I hope this helps!
I am getting following error while trying to run an html5 file on opera 12 browser :
-webkit-transition is an unknown property
-webkit-transition: opacity 0.5s ease-in-out 0s;
-----------------------^ Linked-in stylesheet mycsspage.css:21
How to resolve this?
Thanks
Sneha
If a property starts with -webkit- it means you're using some experimental code that will normally only work in WebKit-based browsers (Safari, Chrome) and cause errors or warnings everywhere else.
In noticing this error and asking the question you've done the right thing though - now you can learn a few simple things about how CSS is developed and how to use experimental and upcoming features safely.
First: why is this code "experimental"? It's because the experienced web developers and computer specialists who sit down together to plan new features for CSS are still trying to figure out how it should work exactly. Over time they try different keywords and syntaxes (discussing details like 'should it say "ease-in-out" or "in-out"?'). While doing so they also want some testing in the real world and feedback from real developers, so they encourage web browsers like Chrome and Opera to support stuff that's unfinished - but with a prefix. The prefix -webkit- then means "this is a temporary implementation, we're not sure that any other browser will ever understand the "ease-in-out" instruction because we haven't finished deciding this, but you can test it as long as you understand it's temporary and you may have to go back and fix your code later, if we change our mind".
To do this correctly, you need to do a bit of research on whether this CSS feature is still experimental. You're trying to use CSS transitions, so you might for example take a look at this:
http://caniuse.com/#feat=css-transitions
Here you see a table of browsers and versions. You see which versions require a prefix like -webkit- , -ms- , -moz- or -o- (for Safari/Chrome, Internet Explorer, Firefox and Opera respectively).
In this case, the most recent versions of Internet Explorer, Firefox and Opera support this CSS instruction without a prefix, which basically means "we think we're done discussing this now, pretty sure it's going to be like this forever. If you write just 'transition' now you won't have to come back and fix your code because we changed our mind."
On the other hand, WebKit-based browsers still require a -webkit- prefix. So what you should do is to make sure you add this instruction twice - once with a -webkit- prefix, followed by one line without the prefix. Like this:
-webkit-transition: opacity 0.5s ease-in-out 0s;
transition: opacity 0.5s ease-in-out 0s;
If you feel very thorough and want to support older Firefox and Opera versions you could also add the -moz- and -o- lines.
If you make sure the code looks like that, you can now ignore the warnings. You've dealt with the problem it was warning you against.
:-moz-system-metric(touch-enabled) looks like a really useful CSS selector for working on mobile sites.
Unfortunately Webkit is dominant on mobile touch devices so does anyone know if there is a Webkit equivalent?
(Ideally it'd be good if this was managed by CSS3 media queries)
Edit: Looks like it is supported in Gecko as a media query
There's no way to accomplish this without resorting to Javascript, at present.
As #easwee said, Modernizr is a well-regarded JS library that focuses on feature detection. You can use its touch test for your use case.
If you don't need all of Modernizr's bells and whistles, you can do the following:
A) Load the following JS as early in your <body> tag as you can:
<script type="text/javascript">
if( !!window.TouchEvent ) body.className += " touch-enabled ";
</script>
B) Write your CSS. Since Gecko uses a media query to inform you of touch availability, you'll have to dupe the touch-specific CSS, like so:
BODY.touch-enabled DIV.foo
{
/* touch-specific CSS */
}
#media screen and (-moz-touch-enabled)
{
DIV.foo
{
/* touch-specific CSS */
}
}
If the per-selector code is identical in both circumstances, GZIP ought to optimize away some of the duplication. (You are using compression, I hope.)
In Ian Wessman's answer the test !!window.TouchEvent works incorrectly. In current desktop Chrome (23.0.1271.52, Linux) window.TouchEvent is a function, so Ian's code considers the browser touch-enabled.
If you want short code, it's probably best to copy-paste the relevant code from Modernizr.
Chrome is another browser that tried to implement a similar selector but unfortunately it was removed out for now.
Modernizr could be and interesting detection tool since it can detect touch events too.
http://www.modernizr.com/docs/#touch