My Setup
vue cli 3
all default config ( autoprefixer, postcss, etc )
My problem
with Samsung internet version > 7
a css input of display:flex is only outputting "display: ms-flexbox" and I need "display: -webkit-flex" to showup.. which won't despite any arrangement of config options and browser lists I seem to test out... not sure what I am missing here.
The effect
my vue spa sidenav menu has messed up layouts only on samsung internet, I determined that it is because it needs the -webkit-flex prefix which I cannot seem to produce
I'm sure that the "browsers" config item under "autoprefixer" is redundant, my output is the same with and without it.
Taking out "no-2009" only adds a "display: -webkit-box" that does not help out at all
In the GitHub issue, you used justify-content: space-evenly; in your code example.
justify-content: space-evenly; is most likely your issue. It doesn't have full support across all browsers yet.
You have listed that you need to support the last 2 versions of IE. That means IE 10 & 11. I'm pretty sure that neither of those browsers support justify-content: space-evenly; since it was a late addition to the spec. If you test in those browsers it should look broken there as well.
Add justify-content: space-around; above it as a back-up. It works in almost the same way but distributes the space a bit differently.
ul {
justify-content: space-around;
justify-content: space-evenly;
/* ... The rest of the CSS... */
}
It needs to be placed in that order so that if the browser supports it, it will use justify-content: space-evenly; and if not, it will fall-back to using justify-content: space-around;.
It won't look as nice in the browsers that need the fallback as it does in the browsers that don't need it. It will look much better with the fallback than without it though.
Daniel was completely correct, Samsung Browser 7.2 doesn't play well with 'justify-content: space-evenly'.. Some version of safari doesn't either ( we had someone in the office show me on their iphone but I haven't grabbed the browser version yet ).
The fix I ended up going with is a 'space-between' hack with a 'display: block' on the element's :before and :after psuedo elements.
2 links to other stack overflow posts where I learned about this are:
How to make CSS justify-content:space-evenly fallback to space-between on Safari?
space-evenly (justify-content) not working on Chrome mobile
Works like a charm on all of the devices tested so far, including on samsung browser 7.2 and that same office mate's iphone browser ( whichever one it was, safari or not )
Remove browsers option. You already have browserslist option.
According Can I Use, Samsung Browser doesn’t need -webkit- prefix.
Seems like you have some browser issue with flexbox here.
Related
I'm having an issue where safari is not rendering a complete text-shadow on a custom glyphicon like chrome or ff does. I attach an image of the button.
Do you know if there's any known bug or anything related to that?
Thanks a lot!
Upd: Happens in Safari 6.1.4, not in the new version 7.0.4, but anyway I have to fix that!
In Safari it simply takes webkit. But still if it creates problem then please try with the below mentioned css.
Text Shadow in Safari
.selector {
text-shadow: #666666 5px 5px 5px; /* Just an example */
}
Please try providing the color first the dimensions and check whether it helps you or not.
Cheers :)
I'm working on an Appcelerator app. We're all new to the platform. For some reason, padding (left or right) - plus some other attributes - doesn't work for mobile web. In fact, I think it's only supported for iOS. What are we supposed to do instead? I've tried just using the CSS equivalent (e.g. padding-left: '10px') in the TSS file to no avail.
There's a bug report for it - https://jira.appcelerator.org/browse/TIMOB-7304 - but it's almost two years old and still no traction on the matter.
You could use a View as a container, then use top/bottom/left/right in the inner element to achieve a padding-like effect. You can see an example of that here: https://gist.github.com/asiviero/7323029, it works on Android but I haven't tested on Mobile Web
Instead of padding-left you should define paddingLeft: '10px'.
I'm having a problem with Twitter Bootstrap Inputs showing correctly on safari 6.0.
Im pretty sure this was fine before I moved to Mountain Lion, and it does seem to be an issue with Chrome.
Basically in Safari, the right end of the input seems cut off an is not displaying correctly. Ive taken a screen shot to demo what I mean...
Safari:
Chrome:
Any ideas?
EDIT: Just looking at the Twitter Bootstrap site and I see that alot of their inputs have the same problem!
Anyone else seeing this?
The artifact appears to be an issue with Safari's rendering of border-radius, and is not specific to Twitter Bootstrap. See rendering borders on Apple's support forum. The inputs usually render normally after you select them.
Disabling border-radius on the affected elements with the following two lines removes the artifact. Be careful though, sometimes this causes even more puzzling artifacts on nearby buttons.
-webkit-border-radius: 0;
border-radius: 0;
I'm having a problem with layout in Safari that works fine in Chrome and FF. It seems that Safari includes the padding within the width while Chrome and FF don't. So what's 630px in FF
due to width + padding is only 600px in Safari. This: Padding in mozilla firefox and in safari seems to show that the box model is different in Safari. If so I would expect a standard solution would already have come up but when I google this, it seems that hardly anyone has this problem.
Is the box model in Safari really different and is there a standard solution? Or do I just have to 'debug' my CSS?
EDIT: apparently it's because the div was using display: table. When I changed it to display: block, it worked as expected. It's still strange though because it's working fine in other browsers (display: table).
Which doctype are you using? When I use < !DOCTYPE html > (the HTML5 doctype declaration) Safari and Chrome's padding behaviour is definitely exactly the same, and as the standards dictate.
In CSS box-sizing handles the box model. By default it's set to the 'normal' but probably incorrect 'content-box'. Support for box-sizing is reasonable across browsers now so you can probably move to 'border-box' but will need to handle it differently in IE6/7 (if you support them).
AFAIK Safari (webkit) should respect this.
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/