I’m not sure if this is a CSS issue or a stability issue with version 2.5. But every now and then the program misbehaves and has crashed a few times since the last update.
I have managed to replicate one of these strange issues as it occurred over and over again in a project I’m building.
I was using some CSS to animate a fade in effect and applying to various objects on the page. When I exported the page and loaded it into Firefox some of the text boxes appeared to enlarge the text.
Trying to replicate the problem produced very mixed effects. I have managed to copy one of the boxes into a new project along with the CSS. I then add a new box, same text and settings plus class. Publishing this shows that the two objects behave differently.
I think that the issue might be limited to having autofit enabled.
I thought I’d better try it on some other machines and again it seems Firefox is the problem but rather than oversized fonts the font simply looks blurry.
I’ved tried your project, the output looks fine in Chrome and Edge, but blurry in Firefox (as in your second screenshot). It seems that it’s an issue of Firefox when rendering a text element which has accumulation of transforms (it and at least one of its ancestors have CSS transform set). Unfortunately, I don’t find any workaround to fix this issue yet.
In your project, the autofit feature scales the document, and the blurry text element is translated a small amount along the y-axis (translateY(-0.000012207px)). It may be due to the number rounding error when editing in the editor. Please select the text element in the editor, set its Translate Y (in Properties pane, Transform section) to 1, press Enter, then set it to 0 again to fix the value. Now you’ll see that the text isn’t blurry anymore in Firefox.
Regarding the crashing issue, it doesn’t occur with your project in my computer. Can you please provide some more details? Saola Animate uses something like an embedded browser to render HTML & CSS on Canvas, it may cause crashing when applying some special CSS styles.
The work around was fine on the sample project I sent you but appeared to fail on my main project as I carried on working so I did the following:
removed keyframes from the CSS - which seems to make Saola happier
used timelines to handle the fades.
The problem still came back - but I think I know why - I used the space vertically option which has set the translateY to various values on the different divs.
I reset all of these to zero and manually spaced vertically by setting the top value and the problem has gone.
What I did discover is that all the issues go away if I turn off autofit. As you can see from the image above, a gap appears in the blue bar and it’s parent group (with border on) when autofit is enabled. Additionally, the bar is animated on the timeline to move downwards (a countdown) - and in my FF developer it adds a small gap to the bottom as it moves.
Chrome seems okay in this instance, but on a another page, I’ve got an SVG icon as a button which uses some basic CSS scale code to make it slightly bigger on hover. In the browser, moving the mouse over makes other elements disappear from the page. Again - it only happens when autofit is enabled.
It’s due to different sub-pixel rendering methods in different browsers. The autofit feature scales the page, makes some CSS values not integers anymore, so sub-pixel rendering occurs.
I’m afraid that there’s no way for Saola Animate to fix this issue. Users must find a workaround for each particular situation.
For your case, please see this test page: https://codepen.io/expexc/pen/oVvwjN
The child div on the right (#progress-2-1) is translated 0.5px left and up, so it results in a better look in Firefox and Edge. You can also use translateY (motion path in Saola Animate) for a smoother animation than top.
Regarding SVG icon issue on Chrome, can you please share a test project?
Following on from the email I send support this week, I think I’ve found the problem. There are various posts on the web regarding using transform scale with Chrome that discuss the same issues that I’ve been having where text appears to blur or items disappear when moving your mouse over an element that uses scaling.
I tried the various posted solutions to no effect but have discovered two solutions that seem to have solved the problem.
If the element with the CSS scale is above the other elements in the elements pane, it doesn’t seem to happen.
If your scale CSS code does not include a transition value, it seems to fix the problem.
As to the other issues:
Making the border wider on the parent element seems to help with the round error issue for Firefox and Edge.
Having removed the key frame animations from the CSS code, Saola hasn’t crashed or slowed down since.
I don’t know if it’s the reason why, but with the last point I wonder if it is because in this project, I was copying and pasting the same object repeated and Saola was trying to do this at the same time as rendering the animations on these objects in realtime?
Anyway, hopefully this post might save someone else time and thanks Toanis for the clear answers.