Transparency and SF beta 4 - sifr

I'm implementing sirf in a site using a Drupal module. I have a few issues...
During testing the text fails in Safari 4 beta (win) and renders with a green background when transparency is applied. No doubt a Safari or plug in issue. There are a few crap things happening, the Lightbox overlay fails to cover any Flash objects. I'm sure you guys are tracking that error.
Exported fonts using Flash CS4 don't work. Got no idea why, I reverted to using one of the online conversion sites. I think the FLA is CS3. Maybe this could be updated.

Transparency failing in Safari 4 / Windows in definitely a Safari bug.
Which sIFR version are you using? The sIFR 2 movie is available in a CS 3 format, I do think the sIFR 3 movie is Flash 8.

sIRF3 and not working with Flash CS4 (for editing)
I've got some issues with headings not being drawn on the initial page load. Like the heading aren't draw in html before sIRF starts up and nothing then appears.
And another where jQuery created drop shadows draw before the sIRF text then when the page shifts they are in the wrong location.
I've mutated the call to this...
$('document').ready(function(){
$('.image-thumbnail img').ready(function(){
setTimeout( "drawShadow();", 4000) //slow it down to give objects a chance to draw
});
});
function drawShadow(){
$('.image-thumbnail').dropShadow({left:2, top:2, blur:2, opacity:0.5}); // Creates new drop shadows
}
What I really need is a signal that sIRF has completed. Any clue how I might do that?

Related

IE 11 crashes when using GPU rendering - large MVC page with bootstrap and datatables

I've got a large mvc 5 bootstrap web page that's repeatedly causing IE to crash. The page has a large number of bootstrap accordions with jquery datatables in. The page loads fine but if you scroll too fast then a small white rectangle appears in the upper left side of the page and IE stops responding.
The page is fine with a much reduced amount of data, it's fine in chrome and its fine if you tick the "Use software rendering instead of GPU rendering" option in IE.
At the moment my solution is to display a warning on the page to the users that they need to tick that box if I've got more than 100 rows of data but especially as that option requires a restart of IE it's not ideal.
How can I go about fixing this, is it something anyone else has experienced?
ok, fixed but I'm not sure it's applicable for anyone else. I was using a old version of datatables (1.10.7) So I updated to the latest and it stopped happening but the memory usage still built up whilst the page was just sitting there. I removed the flash buttons and changed them to the html5 buttons and everything was much much better.

CSS Style strangely rendered depending on device

I'm building a stand-alone application.
The problem is that when I deploy on my webserver, then test it on a desktop browser, everything's fine, not on my mobile device (IPad): the colors are different (yeah, I'm stuck because of colors -.-).
I tried with different browsers - same results.
I use the mobile.ios.css file for my app. So, per example, with the ios stylesheet you got the default blue gradient navbar with the white text for the title (ok on desktop browser). On my Ipad it renders a gray/white gradient instead of the blue and the title is a deeper gray with some shadow. It seems to be the default style of the navbar, but why is it working on a desktop then?
I used the theme builder offered on the kendo ui website to fix it up, but it failed.
I think this issue belongs to the javascript behind kendo framework.
Anybody got an idea or went through some similar difficulties?
Kendo UI Mobile shows slightly different styling on iPhone and iPad, to better blend in as a native-like application. There are also differences between iOS versions (e.g. the Switch is different between 4 and 5 and the TabStrip between 5 and 6).
If you prefer the same styling everywhere, you can force the platform in your application - check the docs for how to do it.

Is Flash Player "Low quality" setting only about anti-aliasing?

It not just my curiosity, recently I've received a bugreport concerning one of my AS3 applications. This bug can be reproduced only if the quality in flash player is set to LOW (HIGH/MEDIUM - everything is ok). The bug changes the application behaviour, but it's a mystery for me, why it happens only for LOW quality while quality is said to influence rendering and visual appearance, not the code or behaviour.
Briefly, I have a menu panel (MovieClip) with several items (also MovieClips). Very simple, it appears on a screen after a MouseEvent and a user moves a cursor from one element down to another. When the cursor reaches the edge of the second item, the menu suddenly disappears.
In my code panel hiding is set on mouse click or mouse out.
Personally, I think, that the problem is in Tweener, I have to use that old piece of code. The menu panel is shown when mouse is above a user icon, and concurrently with the help of Tweener I produce some simple effects on this icon.
I have explored adobe and firefox (my app is for web browsers and the bug is reported for firefox) bugtrackers, but so far I have found nothing. Maybe misbehaviour of flash player 11 with Arrays, already fixed... I've run out of ideas.
From the docs:
LOW
Specifies low rendering quality: graphics are not anti-aliased, and bitmaps are not smoothed.
If it only happens when rendering it set to low, then it's probably a timing issue - i.e., the bug has always been there, but because you're wrapping up rendering earlier, you can trigger then bug. Is the bug reporter's computer a slow one? Is there a lot happening at once? Is the menu being removed, set to invisible, or repositioned?
Like #jeremynealbrown said, try and separate out your class to a simple project to make sure there's nothing wrong with your logic there.
Another method, override the removeChild() method, and visible and x and y properties to see which one is setting it, then put traces before all calls that call these to see what's triggering it.
If you think the problem is in Tweener, add a MOUSE_OVER listener to the menu panel that calls something like removeAllTweens(), no matter the state of the menu panel. If the bug doesn't happen anymore, this will show you that it's related to the tween engine.

sIFR v2 overlaping slimbox (and possibly other lightbox tools)

Just installed sIFR into the site I am building (a personal portfolio site). When using it on pages with slimbox popups, sIFR overlaps the slimbox and makes it dificult to see the image. I tried applying a high z-index to the items I didn't want overlapped, but that didn't solve anything. Here is a screenshot of what it looks like (since my site is not online yet):
http://users.sephiroth.ws/DemonicGoblin/sifr.png
Is there a way to hide the sIFR when a slimbox link is clicked, or a way to adjust the z-index for a way to it not to be always on top? This happens on the latest version of all major browsers (I couldn't test Safari or Chrome though, even though I doubt it will differ)
I ahvent been able to find any information regarding this subject, so if it has been fixed in the sIFR beta it would be nice to know. Thanks.
In sIFR 2 you need to set the sWmode parameter to "opaque". This should allow HTML elements to be displayed on top of the Flash movie.
In sIFR 3, the parameter is wmode, though you can also use opaque: true.
Thank you so much - just saved my day.
I saw that lightbox break - so did I nearly:)!!!
But what a straight forward answer and solution thanks!! again
The file in mention is:
sifr.js
and put a code like:
sIFR.replaceElement(named({sSelector:"h1", sFlashSrc: "http://localhost/ddddddd/templates/template/i_font_swf/carbon_std_swf.swf", sCase: "upper", sColor: "#86ca29", sWmode:"opaque", sBgColor:"#fff"}));
I just write it cause took me some time to remember where this setting initially was - when I did the sIFR long ago.

fitExactly not working in r-436

I just recently upgraded to 436 from 419, and have found that fitExactly will no longer have any effect.
You can see an example here:
(With 419)
(With 436)
The javascript config is in the page head.
I checked the versions in between, and the latest it works with is 419.
I could adjust the width in the Javascript configuration, but then there would be a gap left on the side of the dropcap I'm using it on, and the fact that I'm integrating it with a Wordpress theme that automatically applies sifr (other than the one in the example), meaning that each can't be adjusted by changing the width or font size.
I would much prefer to use 436, especially due to there being less page shifting, so, is there a remedy?
Thanks for your time.
If you compare the width and height of the Flash movie on both pages, you'll see that it's the same. In other words, it looks like fitExactly works fine. I wouldn't know though why Flash is clipping the rendered text.
Just to test, could you open the r436 JavaScript file, search for '419' and replace by '436', and then use the r419 Flash movie? Perhaps that provides further clues.

Resources