Javascript/CSS Jitters in Chrome

We have a web app that takes epub files (unzipped packages) and then shows these as web pages in a browser.  It works great in Firefox and Safari.

But in Chrome  pages from some of the books are stuck in some kind of infinite re-rendering loop,

check out these page in any browser and then try in Chrome

http://www.himalayanacademy.com/book/karma-and-reincarnation/3

or

http://www.himalayanacademy.com/book/how-to-become-a-hindu/12

Meanwhile other books render fine in Chrome

http://www.himalayanacademy.com/book/loving-ganesha/18

and also

http://www.himalayanacademy.com/book/danzando-con-siva_es/8

I am unable to determine the cause of the jittering in Chrome in the former cases. If anyone can figure it out and offer a solution we will be most grateful! Chrome had 50% of the browser share now (so I am told.)
BrahmanathaAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
I suspect your problem is here
<script>

     $('.simplereader').contents().find('body').css({"min-height": "100", "overflow" : "hidden"});
	setInterval( "$('.simplereader').height($('.simplereader').contents().find('body').height() + 100)", 1 );
	bindLexiconToID("#reader");
    </script>

Open in new window

Remove the setInterval from the code. It is causing the height to be reset every second which is causing the flashing.
As a matter of interest what is the setInterval there for - why do you need to be chaning the height of the iframe every second?
Change this line
$('.simplereader').contents().find('body').css({"min-height": "100", "overflow" : "hidden"});

Open in new window

To this (add % to the 100)
$('.simplereader').contents().find('body').css({"min-height": "100%", "overflow" : "hidden"});

Open in new window

0
BrahmanathaAuthor Commented:
Very good, you definitely identified the issue. Apparently my developer (very busy right now and not available) put this in there to force the page to check on the length of the text and set the HTML height accordingly.

I removed that set interval call and added % so we have this now

<script>
     $('.simplereader').contents().find('body').css({"min-height": "100%", "overflow" : "hidden"});
      setInterval( "$('.simplereader').height($('.simplereader').contents().find('body').height() + 100)", 1 );
      bindLexiconToID("#reader");
    </script>


on our staging server for testing- Check now in all browsers.


http://dev.himalayanacademy.com/book/karma-and-reincarnation/3


Yes, the re-rendering jitter is gone in Chrome but apparently without issue the find call we don't know the height and the page -- actually the acticle-wrapper div -- is defaulting to 243 px high.  

setInterval( "$('.simplereader').height($('.simplereader').contents().find('body').height() + 100)", 1 );

So what this does (obviously) is measure the text, set the page height, add 100 pixels for the previous / next links at the bottom and resize the page.

My guess is he set this on a loop to make sure if the user move to the next page, the height would update accordingly. So, we need a better say to do that when a) upon first entering the page and b) upon navigating to the next or previous page.  But I am out of my depth there...
0
Julian HansenCommented:
if the user move to the next page, the height would update accordingly
If the "next page" results in a refresh of the main page then it is not necessary because you can check on page load.
If the next page happens inside the iframe then on page load in the iframe call a function in the parent to adjust the height rather than trying to monitor it from the outside in.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

BrahmanathaAuthor Commented:
OK, understood, well, in principle. make sense. but I'm a little out of my depth on implementation. In theory we need to wait until the entire page loads before we can determine any geometry requirements. We use a page assembly system (LiveCode/RevIgniter)  and this content is inserted into a template. The immediate parent for the iFrame  is div class=article-wrapper. and we are inserting all content for the page into that div like this.  I tried using the same code as the set-interval (which works) but I'm not getting it quite right...

<!-- this comes from the template:-->

<div class="article-wrapper"> 

<!--  the following is inserted dynamically  prior to delivery-->

<style type="text/css">
.simplereader {
	width: 100%;
	height: auto;
}
</style>
<script src="/assets/js/lexicon.js"></script>
<script>
       $(window).bind("load", function() {
                 ('.article-wrapper').height($('.simplereader').contents().find('body').height() + 100)" );
});
    
	bindLexiconToID("#reader");

    </script>
<!-- contents of the page is also inserted dynamically before delivery: using a global array
the contains the text (and image links) for the page:-->

<iframe id="reader" class="simplereader" src="[[ gData["book"]["src"] ]]"></iframe>

<div class="simplereader-navigation">

<span><a href="[[ gData["book"]["previous page"] ]]">Previous</a></span> | 
<span><a href="[[ gData["book"]["next page"] ]]">Next</a></span>

</div>

</div> <!--End article-wrapper-->

Open in new window


http://dev.himalayanacademy.com/book/karma-and-reincarnation/3

still now joy though... doesn't work..
0
Julian HansenCommented:
Try this
<script type="text/javascript">
$(function() {
    $('iframe').load(function() {
        ('.article-wrapper').height($('.simplereader').contents().find('body').height() + 100)" );
    });
});
</script>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
BrahmanathaAuthor Commented:
Still  not getting a resize on the parent to match content in the iFrame (which should show completely with no scroll required...)

http://dev.himalayanacademy.com/book/karma-and-reincarnation/3
0
BrahmanathaAuthor Commented:
Andre got back to Rio-Brazil from the Mozilla Summit in Toronto.  Following your lead he fixed it as follows. We had to resize both parent and the iFrame to get it to work. But your pointer was indeed the solution.

$(function() {
    $('iframe').load(function() {
            var newSize = $('.simplereader').contents().find('body').height() + 100;
        $('.article-wrapper').height(newSize);
          $('.simplereader').height(newSize);
    });
});
0
BrahmanathaAuthor Commented:
This script "pointed" to the solution but was not a complete solution... but had the basic "algorithm" we needed: which was to get away from the setInterval method and instead to use the find to check for size requirement/resizing  on load.
0
Julian HansenCommented:
Actually it was a solution. Your question was

I am unable to determine the cause of the jittering in Chrome in the former cases. If anyone can figure it out and offer a solution we will be most grateful! Chrome had 50% of the browser share now (so I am told.)

The answer to that was that setInterval line was causing the problem and to solve it you needed to use the the iframe .load function to set your size.

The question was not about how to set the right size for the iframe.

I will let you respond to this before requesting attention from a mod.
0
BrahmanathaAuthor Commented:
But if your solution broke the page in other (all) browsers, by causing the page to truncate ...?  At any rate I did accept your answer as a solution. Doesn't work?
0
BrahmanathaAuthor Commented:
If you read from the top "updating the height" was clearly part of the requirements
0
BrahmanathaAuthor Commented:
Understood... I thought he got 500 points regardless of the grade..
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.