Explore the community Forums Lectora Lectora Questions & Answers Responsive courses flash white and don't display correctly on iPhones

Tagged: , , , ,

Viewing 15 posts - 1 through 15 (of 28 total)
  • Author
    Posts
  • #303610 Score: 0
    Profile photo of rwalters
    rwalters
    Member
    contributor
    beginner
    intermediate
    advanced
    curious george
    wise owl
    7 pts
    @rwalters

    I am trying to make my courses responsive but am running into issues after publishing. There is an annoying flash to white every time I go to a new page. This happens on both desktops and mobile devices. It only happens with responsive courses. The time to switch pages is also noticeably longer. I can take a course that is pretty stripped down and switches pages rather quickly, but as soon as I make it responsive, it starts taking longer with a blank white flash in between. It’s extremely hard on the eyes. Does anyone have a solution?

    Another issue I have is that while the mobile size works pretty well on Android phones, they don’t fit right on iPhones. The size is too small and is shifted to the right, with blank space on the left. It shrinks more when the page is extra long. But even at the default size it doesn’t display correctly. I tried using the “Fill Width” external HTML I got from this website and had previously used for mobile versions of modules. But using that causes courses to also display at full screen on desktops, which is way too large. Moving it off the screen isn’t really an option as this type of external HTML doesn’t display on screen in Lectora. I actually tried switching it to a different type then moving it off screen  but that didn’t work either. Has anyone else figured out how to display it correctly on an iPhone?

    • This topic was modified 2 years, 11 months ago by Profile photo of rwalters rwalters .
    #303612 Score: 0
    Profile photo of Jennifer Valley
    Jennifer Valley
    Member
    contributor
    beginner
    friend finder
    advanced
    lectora beginner
    verified member
    wise owl
    profile
    picture perfect
    curious george
    113 pts
    @jvalley4735

    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: https://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.

     

    #303616 Score: 0
    Profile photo of rwalters
    rwalters
    Member
    contributor
    beginner
    intermediate
    advanced
    curious george
    wise owl
    7 pts
    @rwalters

    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?

     

    • This reply was modified 2 years, 11 months ago by Profile photo of rwalters rwalters .
    • This reply was modified 2 years, 11 months ago by Profile photo of rwalters rwalters .
    #303624 Score: 0
    Profile photo of Sinchu
    Sinchu
    Member
    beginner
    intermediate
    contributor
    advanced
    wise owl
    1 pt
    @Sinchu

    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.

     

    I have updated the same issue with your support team but no luck at all.

    I am also experiencing the same issues n I strongly believe itsa tool bug.

    @rwalters

    Is fill width external option is working fine for iPhone?/ if yes then we can write the code only for iOs devices.

    I can also find the same issues in the sample courses which trivantis shared.

    In adroid chrome browser everything looks great but lots of issues in iPhone and iPad.

    Please let me know if you are finding any solution n I will also update you if I get a solution.

    I hope trivantis will fix the tool issues soon

     

     

     

    #303625 Score: 0
    Profile photo of rwalters
    rwalters
    Member
    contributor
    beginner
    intermediate
    advanced
    curious george
    wise owl
    7 pts
    @rwalters

    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.

    #303645 Score: 0
    Profile photo of Sinchu
    Sinchu
    Member
    beginner
    intermediate
    contributor
    advanced
    wise owl
    1 pt
    @Sinchu

    @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.

    #303654 Score: 0
    Profile photo of rwalters
    rwalters
    Member
    contributor
    beginner
    intermediate
    advanced
    curious george
    wise owl
    7 pts
    @rwalters

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

     

    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;
    }

    #303655 Score: 0
    Profile photo of rwalters
    rwalters
    Member
    contributor
    beginner
    intermediate
    advanced
    curious george
    wise owl
    7 pts
    @rwalters

    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.

    #303661 Score: 0
    Profile photo of Jennifer Valley
    Jennifer Valley
    Member
    contributor
    beginner
    friend finder
    advanced
    lectora beginner
    verified member
    wise owl
    profile
    picture perfect
    curious george
    113 pts
    @jvalley4735

    @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.

    #303668 Score: 0
    Profile photo of rwalters
    rwalters
    Member
    contributor
    beginner
    intermediate
    advanced
    curious george
    wise owl
    7 pts
    @rwalters

    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.

    • This reply was modified 2 years, 11 months ago by Profile photo of rwalters rwalters .
    #303677 Score: 0
    Profile photo of John Blackmon
    John Blackmon
    Member
    beginner
    intermediate
    contributor
    friend finder
    advanced
    junior moderator
    wise owl
    LUC16
    LUC16 Attendee
    verified member
    22 pts
    @johnb

    @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?

    #303683 Score: 0
    Profile photo of Sinchu
    Sinchu
    Member
    beginner
    intermediate
    contributor
    advanced
    wise owl
    1 pt
    @Sinchu

    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.

     

     

    #303684 Score: 0
    Profile photo of Sinchu
    Sinchu
    Member
    beginner
    intermediate
    contributor
    advanced
    wise owl
    1 pt
    @Sinchu

    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.

     

     

     

    #303691 Score: 0
    Profile photo of rwalters
    rwalters
    Member
    contributor
    beginner
    intermediate
    advanced
    curious george
    wise owl
    7 pts
    @rwalters

    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.

    • This reply was modified 2 years, 11 months ago by Profile photo of rwalters rwalters .
    #303693 Score: 0
    Profile photo of rwalters
    rwalters
    Member
    contributor
    beginner
    intermediate
    advanced
    curious george
    wise owl
    7 pts
    @rwalters

    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.

    • This reply was modified 2 years, 11 months ago by Profile photo of rwalters rwalters .
Viewing 15 posts - 1 through 15 (of 28 total)

You must be logged in to reply to this topic.