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;
Related
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;
I am working on a Bootstrap template that I am building on the Bootstrap 3.3.1 LESS files compiled on the go (as a temporary solution) with less.min.js. The problem is when I try to flip slides of the Bootstrap carousel they do so with no animation. Chrome Dev tools gave me this:
.carousel-inner > .item {
transition: transform 0.6s ease-in-out;
backface-visibility: hidden;
perspective: 1000;
}
As you can see there is not -webkit-transition line for some reasons.
Switching to bootstrap.css or replacing the carousel.less file with that from v3.3.0 resolves the issue. Is it a Bootstrap issue or is it something on my side?
You should run the autoprefixer (since version 3.2), also see https://github.com/twbs/bootstrap/issues/15203
Cause your are compiling client side, you can NOT run this plugin. Alternatively you can use -prefix-free.
Notice that the autoprefixer is part of TB default build process now.
Thought they were supposed to use mixins internally until v4
Yes, probably. But i seems new added code is not longer prefixed by mixins. Code that used a mixin before v3.2. already, are not replaced before v4.
You can see the above in the less/carousel.less file, that contains the following code (reflecting your issue):
// WebKit CSS3 transforms for supported devices
#media all and (transform-3d), (-webkit-transform-3d) {
transition: transform .6s ease-in-out;
backface-visibility: hidden;
perspective: 1000;
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.
I am working with this example to try and learn Sencha Touch. I have what should be a very simple request, but I am stumped. Does anyone know how to remove the empty category on the home screen (middle of top row, or second from the left)? I have been combing through the code and cannot figure out where this is being configured.
http://dev.sencha.com/deploy/touch/examples/production/touchstyle/index.html
Thanks for your help
Did you try to inspect the elements with Chrome/Safari Developer Tools? If you had, you would get the simple solution instantly. However, here is the the css which is making that extra space:
body:not(.x-phone).x-landscape .categories-list.root
.categories-list-item:first-child {
margin-right: 345px;
}
Make it margin-right: 0px; and it will work.
What is the equivalent of
-webkit-transition: opacity 0.6s linear;
in -moz?
I tried replacing -webkit with -moz, but nothing happened. I even tried extending it to -moz-transition-property/duration, but with no success.
Try it in Firefox 3.7 (Gecko 1.9).
There isn’t one. CSS animation properties like transition were pretty much invented by Apple (although I think they’ve submitted them for inclusion on CSS3), and they’ve only been implemented in WebKit so far.
There is some support in the nightly builds of Firefox though: http://blog.mozbox.org/post/2009/10/12/Some-new-demos