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 :)
Related
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.
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'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 have no idea why but in IE 9, when I have links on page using absolute positioning they will not seem to work or appear to sit behind everything else, but if you add a background colour it now works. I actually know the answer to this but I am posting it here to let anyone else who has had this problem know how to sort this.
Add
background: url(./this-not-a-hack.gif) repeat;
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/