Responsive courses flash white and don';t display correctly on iPhones

The first issue your experiencing is directly related to an update to Adobe Flash that was pushed out on 12/28. You can read the full details here: http://community.trivantis.com/forums/topic/adobe-flash-player-known-issue-please-read. Adobe is working on pushing out a fix. You can read more information here: https://forums.adobe.com/thread/2052500?start=0&tstart=0.

I haven't heard anyone experiencing similar issues with iPhones. What type of iPhone are you testing on and what version of IOS are you running? Could you provide me with your source files? If your not comfortable posting them in the forum feel free to email them to me at jennifer.valley@trivantis.com.

undefined

Hi Jennifer

How can you say that no one reported the same issue? I have reported the same issue three weeks back and no updatet till now.

undefined

I'm not using any flash, audio or video in this title though. The page goes white in between every page, even though it's just text and graphics. This occurs on our website, after publishing to HTML.

I'm using an iPhone 5s. I'm updating to the latest iOS version now and will let you know if that makes a difference. Should I email the zipped Lectora title?

undefined

The "Fill Width" code fixes this. The issue is that I don't want to have "Fill Width" on a desktop. It ends up huge in full screen. If there is a way to have that only apply to iOS, that may solve it. I haven't tried it on an iPad yet.

Thanks. Yeah, I just used the word "flash" to describe what it looks like on screen. It goes to a blank white screen before loading the next page. Before, it top-level objects would either stay on screen while switching pages, or it would be so quick you wouldn't notice. Either way it takes longer between pages with responsive titles.

Someone from Trivantis had posted it last year. The Type is Header Scripting.

undefined

var MyTitleWidth=0;

var MyTitleHeight=0;

window.top.addEventListener("orientationchange", function() {

ReFlow();

}, false);

function ReFlow(){

findWH();

if (pageLayer){

var dv = document.getElementById("pageDIV");

if(MyTitleWidth==0){

MyTitleWidth=parseInt(dv.clientWidth);

MyTitleHeight=parseInt(dv.clientHeight);

}

pageLayer.moveTo(0, 0);

pageLayer.hasMoved = true;

pageLayer.newX = 0;

pageLayer.newY = 0;

var scale = winW/MyTitleWidth;

var transX = -parseInt((MyTitleWidth-winW)/2);

var transY = -parseInt((MyTitleHeight-(scale*MyTitleHeight))/2);

var sty = "translate("+transX+"px, "+transY+"px) scale(" + scale + ")";

dv.style.transform = sty;

dv.style.MozTransform = sty;

dv.style.msTransform = sty;

dv.style.OTransform = sty;

dv.style.webkitTransform = sty;

}

}

function findWH(){

winW = window.top.innerWidth;

winH = window.top.innerHeight;

}

@rwalters: The "Fill Width" code is intended for non-responsive titles, it is not necessary for responsive titles. I think I put that in a comment on a post for that topic, but its probably too far down the page. I should probably put it at a higher level.

As Jennifer mentioned, there is an issue causing the sizing problem on the iPhone, that will be fixed in a patch very shortly, so you should not see that issue.

@rwalters, @sinchu: The "flashing" issue you referred to is when the course switches HTML pages, generally referred to as the "switch page" issue. Unlike many tools out there, Lectora has always produced individual HTML pages for each page in a title. This is one of the things that enables a Lectora produced course to be extremely long and/or complex without any memory issues or degradation in performance. We get many customers that have tried other tools that tell us that when their courses become large they suddenly become "buggy" in the other tools, and this is due to the tool never actually switching HTML pages, and using up or corrupting memory somewhere along the way.

This does lead to the issue of seeing the page switch, and I had not heard that a responsive course taking longer to switch pages than a non-responsive course, but that is something we could certainly look into and try to optimize.

Did the same content show different load times between a responsive and non-responsive publish?

@rwalters

Yes we can write the code only for iOS devices, can you please share the coded you added for fill width. i can rewrite it only for iOS.

Does anyone have a solution to the white screen appearing in between pages? This doesn't seem to be the issue described in the thread about the bug in Flash. This appears when viewing after publishing to HTML.

@rwalters - Ahhh...I thought the white flash was related to the Adobe Flash issue. I did receive your files via email and after testing brought the resizing issue to developments attention. They are looking into the issue and I'll report back when I hear something.

@sinchu - Apparently there was some confusion, I wasn't speaking to the page reload issue when I said I hadn't heard anything I was speaking to the phone resizing. I have heard and seen the page reload issue in action and it's not just Lectora. It's the way the internet reloads a new page.

Hi john

Thanks for the update ,I can see the same issues are there in iPad n it behaves different during the orientation change,sometimes course is zooming or changing the size.

Please let me know by when this issues will b fixed, as we informed to Lance that we are pitching many projects and we decided to go with lectora for development.

undefined

Another odd thing. When displaying full screen as a web app, it fits correctly on an iPhone in the vertical position, but when held horizontally the page shifts over to the right. You can slide it back to the correct position but this has to be done on every single page. This doesn't happen on an Android, just the iPhone.

Also, when I opened a title in Chrome on an iPhone (not in full screen), it behaved the same way as viewing it in Safari as a full screen web app. It sizes correctly when vertical and shifts to the right when horizontal.

Hi Jennifer

That's fine, I will forward the mails which I send to your supporting team plz look into this n let me know what best can be done.

undefined

John, thanks for the response. The Fill Width code isn't a good solution after all, as the course does not display correctly on an iPhone when running full screen as a web app. It actually pushes it off to the left on iPhones. I really want to have that option to go full screen. No problems with this on Android. I hope the up date is soon as it currently just doesn't work well on iPhones and a lot of our employees use them.

As for the time to load pages, it's almost instantaneous on non-responsive courses where the pages are basic. You may see the header flash for a split second, but it's so quick you barely notice it. On responsive courses, it almost feels like there is a blank page that is auto-forwarding to the next page.

@rwalters

Even I m experiencing the same issues in iPhone ,as John mentioned its a problem with page reload ,if you keep reloading the page then course fit properly.

I have tried resetting the window.scroll but no luck.

undefined

Our developers have confirmed that they modified the way we load pages with RCD. This should greatly reduce the amount of time it takes RCD pages to load and the "flashing white" that appears.

It won't make it into our next update scheduled for this month. But it should make it into the next one in February.

Hi John

Any update on patches? by when this will be fixed?

This will be out in the patch scheduled for next Monday. Sorry for the delay.

I have v16.0.2 and still have this flashing white issue with responsive titles. I used CSS to change the background color to a dark gray, which is a little easier on the eyes than the bright white flash, but it's still a noticeable delay between pages.

undefined

body {

background-color: #4f4f4f !important;

}

Hi Jennifer

Any update on white screen issue? most of our client is not happy with the white screens, please see the response from client

"I did notice that the transitions need to be worked on – when I clicked to the next page the whole module flashed white as the next screen downloaded. I also assumed since this is just the first section, that the transitions are being worked on in the development of the entire module"

Please update the status so same we can inform to client.

undefined

Regards

Sinchu.

Hi Sinchu,

Have you republished your title with Lectora 16.0.2?

I was wondering if you found any new solutions to this issue?

Perhaps if someone were to post an example of a lesson that this happens in we might be able to troubleshoot.

I'm on the newest release (16.1.1) and the flashing white has gone away.

Hi All

I am sharing the link where I can able to see the whit flashing issue,

http://54.187.125.87/ftpadmin/link/1133/M2/

I have used latest lectora to publish.

On LUC2016 John showed a new feature in upcoming releases: One-Page-Publishing. That will kill the White Flash!

HI All

Still I am able to see the white flashing in latest version .any proper solution for this? rethinking to use other tool to develop the eLearning courses. most of the clients are not happy with the lectora performance.