macOS Mojave
After Effects 17.0.2 (CC 2020)
newest Versions of Chrome/FF/Safari and Lottie/Bodymovin
When scaling a svg-animation in Safari (transform: scale(>1)), it will be rendered extremely pixelated/blurred. In Chrome and Firefox it renders without problems. Is this a known issue and if so, is there a known workaround?
You can find the animation here:
http://kb.zeitweisen.com/Index.html
I hava the same problem . svg is blurry in Safari .
svg element have
transform: translate3d(0px, 0px, 0px);
I cover this style
transform: unset !important;
It works for me
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.
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 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.
When embedding html inside of SVG using the foreignObject tag, webkit based browsers render the backgrounds of the embedded html elements behind the svg elements. See http://code.google.com/p/chromium/issues/detail?id=35545 .
Here's an example : http://www.mxgraph.com/demo/markup/webkitbg.html
The green div should be on top of the red.
Does anyone know of a workaround for this issue? Maybe some incantation of z-index and/or grouping of elements or something in svg to fool webkit into doing the right thing?
This is webkit bug 58417, fixed on 2011-11-10. The fix is in Chromium version 17, which is currently in beta as of 2012-01-09, and should be released in early February. Not sure when the fix will land in Safari, but luckily I don't need to support it.
So the workaround seems to be "wait a month"...
I've just been hit by the same issue. Even though the bug is fixed since a long time in Chrome, Safari seems to be ages behind with the codebase.
My solution is to add style="display:inline-block" to the first child of the foreignObject tag. This seems to fix the problem.
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/