Basically every time you refresh the page the browser clears the screen so it's completely white, then paints everything real fast. This causes a noticeable jump when switching pages or refreshing a page. It is most noticeable in FF and least noticeable in safari with IE being in the middle.
Is this fixable or just a con to using Sifr?
I think it's a con to using Flash to render text. Have you considered using a server side language to generate text or typeface.js ?
Or better still, can you use a web safe font, or is the client the type that won't budge?
Edit
You may be talking about FOUC ... Flash of unstyled content. This generally is an IE issue with stylesheet placement, but I've seen in it Safari before too. There are generally workarounds for this.
Related
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.
I've happily developed a mobile website using JQuery Mobile, and everything works beautifully except for a noticeable delay hiding the browser address bar on the homepage (around 5 seconds on iOS Safari).
AJAX transitions mean it's always hidden from that point on, but on the opening page the site logo is hidden for up to 5 seconds after the page has loaded, giving it a very unbranded and confusing feel for the user.
Can anyone think of any reasons for the delay / ways to speed it up? There are no large images loading on the page, putting an alert in the window load event fires way before the address bar is hidden and the setTimeout delays on the code firing in the JQuery Mobile code are only of the order of 20 ms.
Thanks in advance, Ted
I use Mobile Boilerplate's MBP.hideUrlBarOnLoad() and am not experiencing a five second delay.
Hide URL Bar
MBP.hideUrlBarOnLoad is used to hide the URL bar at the top of mobile
Safari on your iOS. Mobile space is limited and this helps to leverage
every pixel on the screen to maximize display area.
Sadly I've had to resort to a pretty hacky solution to this.
I've added a dummy 60px high spacer div at the top of the page, which pushes down the title, so it is visible at all times. This is then hidden by Javascript after 5 second setTimeout call, which is roughly equivalent to the delay we get on the url bar being auto-hidden by JQuery mobile.
This is only necessary on the start page, and other ones that we've had to load on rel="external" links, due to us making the error of mixing an ASP.net site that requires postback with JQuery mobile, but that's another story...
I've seen this happen when the content is Safari "Reader" compatible (when you see the "Reader" label next to the url on the url bar). I'm not sure but if this is the case maybe you could try to make your content less Reader compatible.
I've observed this on iOS 4.3 to 5.0. When you create a even a simple offline web app, meaning one HTML file + few assets such as CSS and JS (all present in the cache manifest), it works offline (I tested in Airplane Mode) – BUT, when you add such an app to your home screen and open it in fullscreen mode, it first displays initial content, then everything disappears (page becomes white) for half a second or more, then content reappears again.
You can see this by adding Glyphboard, a well-known and useful offline web app, to your iOS home screen and launching it a few times. You should see the white flash effect every time you load it.
This is a big problem because it gives away the non-nativeness of an app and gives the impression that the app is non-optimized for performance and buggy.
I've tried finding reports about this but all I can find is rumors and misconceptions about the iOS 4.3 JavaScript rendering engine fiasco, which doesn't need at all be related to this issue. But in iOS version 3 I distincly remember not ever seeing the white flash.
Clearing the screen and other artifacts while rendering is a common issue of HTML rendering due to the progressive nature of HTML. The concept is that the browser should draw as early and often as possible and render styles/scripts/content as they become available. It's possible the markup has an issue where all rendering is delayed until some content or a script is available. This could happen if:
You have dynamic heights based on image dimensions but you haven't
set the image dimensions in the markup or CSS.
Your layout is based on tables and you aren't using 'table-layout:fixed` in CSS.
Your HTML uses inline scripts with document.write().
You have some kind of onLoad() function that reveals/modifies content.
You link to an external stylesheet.
You're using uncacheable external content or you've disabled caching.
You're using external content that's returning 404 or isn't available offline.
Has your HTML/CSS changed between testing IOS versions?
I've found this to be caused by the use of:
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0">
With a minimal page, I get a white flash between the apple-touch-startup-image and the page contents if I use the viewport meta tag. If I take out the tag, no flash.
It's possible to work around the problem by setting the tag programatically.
I think what happens here is that iOS takes a screenshot from the page when it is added to the main menu. Then this screenshot is displayed during the application loads (WebKit loads). WebKit starts rendering the page and the page itself is constructed in such a way that the page content is not instantly available, leading to a white flash which is a rendered page when page content is not yet there,
You can avoid the problem to a certain level by building your JS/CSS so that it loads the initial HTML view fast and then lazily loads / builds the rest of the resources on the background. Also you can set a custom loading screen instead of the default screenshot iOS uses from the page.
Maybe if you can take yourself a screenshot of your app and then have something like this:
<body style="background: white url('my-initial-loading-screen.png')" />
... and make sure image is available and comes from manifest.
Or even better, have loading screen which does not require any external resources to show (just plain HTML) so you know the browser doesn't need to load anything.
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?
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.