Has anybody ever had any issues with transitioning the opacity of an SVG text element? I'm using both the fill-opacity style and the stroke-opacity style to fade the text elements into and out of existence. It works fine on most browsers, but doesn't transition at all in Chrome on Mac -- the text just pops in and out all at once.
I tried setting the "opacity" attribute in addition to fill-opacity and stroke-opacity and that does seem to make it work, although now I see a weird flicker effect just before and after the transition runs. It's like it's setting it to opacity=1 for a split second before it sets it to 0 and then transitions to 1.
Another interesting thing is that other shapes (circle, rect) fade in and out just fine with nearly identical code to what I'm using with text.
This does seem to be weirdness with a specific browser, but I'm wondering about other people's experiences with opacity on text elements. Are there tricks to get it to behave consistently?
What version of Chrome are you using? I noticed a bug in Chrome dev some time ago when working on the word cloud but it appears to have been fixed as of 19.0.1077.3 dev. Perhaps the fix hasn't made it into your particular version yet?
In my case, using opacity fixed the problem temporarily. The flicker effect could be due to exponent notation not being parsed for very small numbers; you can try using 1e-6 instead of 0 to get around this.
For an animation I made some months ago I toggled the style and used webkit-transition, in combination with visibility: hidden. This seems to work well. If that doesn't work, you could try transitioning to an opacity near zero.
Related
I have a rich text label that works fine under a resolution of 1920x1080. However, when scaled down to the resolution on my laptop, which has a 1366x768 resolution, the text on said label becomes janky and malformed.
Some lines are cut off at the top or the bottom, and others are squished (as you can see in the image at lines 3, 6, and 13).
I'm using Godot v3.5.1 and the text font is Noto Sans Regular from here
I tried enabling mipmaps, using the filter, disabling anti aliasing, disabling font oversampling and enabling GPU pixel snap under Project Settings > Rendering > 2D > Snapping. And out of all of those, only the pixel snap setting worked. Completely fixes the issue and the text is rendered properly.
However, this completely breaks an animation of a spinning circle that plays at basically all times during the actual gameplay. It becomes stuttered and shakes instead of the normally smooth animation it has otherwise. I realize this may possibly be fixed by using SVG instead of PNG sprites, but I feel like that's not an ideal solution in case other sprites get added. Especially since my game will also allow community members to add their own sprites for their own game play.
So is there any way to fix the text without breaking the animations, or make it so that the animations don't break with pixel snap enabled?
I am experiencing two weird things happening with svg rendered in safari (works fine in Chrome/Edge/FF and heck even IE)
Lines not defined in SVG will appear and disappear randomly when panning around.
Lines defined in SVG might disappear randomly when panning around.
Not really that easy to describe so I made a video for it
https://youtu.be/BqlItab0k_g
I did not use any fancy SVG feature like script or media query. The only elements used are text/path/rectangle.
The SVG is generated by me and optimized using SVGO
[Codepen](https://codepen.io/alt22247/pen/vwzBmL)
The svg is base64 encoded since I can't upload svg to code pen. Had to use code pen instead of SO built in since the base64 encoded img text exceed SO limit. Feel free to decode it back to text.
I can't think of any way to mess up the SVG without causing a parse error so I believe this is a Safari bug. But we need to support Safari regardless (typical life of a web dev).
So the question is: What is causing this and is there any work around I can do rather than wait for Apple to fix it 10 years later?
This is my second question, and I’m hoping to resolve an issue that I haven’t found addressed, though I did search for an answer.
Links and screenshots to problem are below. Using Fireworks CS5, I have created an animated gif consisting of 3 states that loops 3 times. It is built on layers, with the 3 states sharing only a background border. They do not share the background (the background is grouped layer consisting of a red box with a clipping path of white, which seems to work in the first two states, but fails in the third state) itself, or any other element.
It is a tile ad for an html e-newsletter, and it works on some clients (gmail, for instance), but the final state does not render properly in other clients (mac mail, for instance). To add to the issue, the same file was rendering correctly in Mac Mail earlier. The gif works if I open it in a browser (usually), as well.
I thought that animated gifs were very stable across platforms except for problems with looping in Outlook 2007 and I've never had this issue before (granted my experience is limited). Has anyone else had this experience? Does anyone have advice on this issue?
Many thanks,
Andrew.
Link to the good. This is the animated gif file. It may not work in all browsers (I did test the file thoroughly, but the weird issue just seems completely sporadic), but renders correctly in latest Firefox for Mac OS 10.7x.
Link to the bad. The third state is see-through, the background layer is not rendering.
Turn Off the Alpha Transparency in the optimization panel. After carefully examining each state, I realized that I had Alpha Transparency turned ON in the export. Even though each state had a solid red back ground, and even though the other states correctly rendered the solid red background, the Alpha Transparency was messing up the last state of the animation. To correct it, I simply turned OFF the Alpha Transparency. I don't know why I didn't think about that as the solution before. I hope this answer helps someone!
I've placed an image on top of a div. I'm trying to blend the image into the div (The div is a solid color). In Google Chrome, it looks great! The colors blend perfectly. In IE 7, however, the colors show a hard line even though they should be the same color! After some examination (a print screen put into paint.net to check the actual RGB values), IE 7 is actually lightning up my image.
The blend has to look seamless. Google Chrome was fine with this thus far. Any ideas why IE 7 wont display the color right?
The two browsers are using different rendering engines. There are minor differences between them in how they render graphics, particularly jpegs.
The differences are minor but unavoidable.
Most of the time it goes unnoticed; it only makes an appearance in cases like yours when you try to position it against an element with a solid background colour that is supposed to be the same.
You may be able to resolve the issue by using a different image format. Try saving the image as a PNG. PNGs tend to be rendered more accurately between the browsers than jpegs, so that might be enough to solve your problem.
If that doesn't solve your problem, you could try using PNGs alpha transparency feature to produce an image with a fade to transparent at the edge, and then overlap the background colour behind it. This will definitely give you a smooth transition, but is a bit more technical, so harder to achieve. It will also give you problems with older versions of IE (IE6 for sure, I think you'll be okay with IE7), as they had some major bugs with PNG transparency. (If this is an issue for you, there are work-arounds for this; google IEPNGFix for more)
I am building a website with a TON of png-24 files that have transparent background. In IE 6 they obviously aren't displayed correctly, so I need some sort of reliable, good solution that will fix the PNG problem in IE and require little work and be reliable. Any good ideas?
For IE6 transparency I follow a personal flow:
1. If there is just one or two PNG images (like a logo, or a normal image) I just use filter:
#selector {background:none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.png', sizingMethod='crop');}
Problems: If applied to a link, it will no longer be clickable. Possibly apply to the h1#logo and have the a be transparent.
2. If I have a lot of 24-bit PNG files, or special use cases (repeating background, etc), I use DD_belatedPNG
IMPORTANT FOR IE7 + IE8: You cannot animate or combine the filter:alpha (which is used for overall opacity on an element in IE and also used by jQuery to set opacity) property with 24-bit transparent PNG images. It changes it to look like 8-bit transparency, with everything that is not 100% opaque or transparent taking on a black background.
Here are a few good png fixes for ie6:
http://labs.unitinteractive.com/unitpngfix.php
http://www.twinhelix.com/css/iepngfix/
There are a lot IE PNG fixes on the net, which basically all work with the same technique. The older Internet Explorers do not support alpha in PNGs directly, but they all have a filter that does so. So writing the following code as part of a css of an object puts the image in the src to the background of the element:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png');
That way, you can easily display transparency in the Internet Explorer. However it's a lot easier to just get one of the png fix scripts (in JavaScript) and include it to your page inside of conditional comments. Then the script will make all your images working automatically.
We used Dean Edwards' IE7 for this. (So named before IE7 came out.) It's been good for that kind of thing.
There are currently many options to get this working. The standard is apply a DirectX filter through CSS to change make the PNG transparent in IE6. There are even scripts that will automatically do this when the webpage loads from an IE6 or less client.
http://www.google.com/search?btnG=1&pws=0&q=transparent+png+ie6