Jump to content


Photo
- - - - -

IE8 page content jumps when being loaded

ie8

  • Please log in to reply
24 replies to this topic

#1 barryevans

barryevans

    Advanced Member

  • Members
  • 30 posts
  • LocationDorset
  • Framework Version:2.4.1
  • Country: Country Flag

Posted 26 March 2013 - 08:52 AM

Hi,

 

I have an issue on IE8 when the page content jumps when it loads.

 

A couple of things worth mentioning:

 

I am using the google compatibility script, when this is turned off the issue goes away, but I get other compilibilty issues.

I am only seeing this behavoiour on IE8, all other tested browsers are fine including IE9, Firefox, Chrome etc...

I have tested with all CSS removed but still see the same behaviour

I have used IE8 specific CSS to get the formating to look correct, so it is formatted correctly after the page jumps. 

 

I am not sure if my issue is related to the below post?

Please Login or Register to see this Hidden Content

 

My site can be found here

Please Login or Register to see this Hidden Content

 

PS. two screenshots attached to show before and after, the page jumps between 1-3 seconds of loading dependant on which machine it is being loaded on.

 

Screenshot1

Please Login or Register to see this Hidden Content

 

Screenshot2

Please Login or Register to see this Hidden Content

 

If you need any additional information, let me know

 

Thanks,



#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 16563 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 26 March 2013 - 08:58 AM

HI,

 

Can you install a free application called Jing. Jing captures anything you see on your computer screen, as an image or short video, and lets you share it instantly.

 

Record the issue and provide us with the URL to the uploaded clip, then we can see the issue first hand. As most of our staff do not have access to the IE8 Browser.

 

Also, please try removing all non-PageLines plugins and see if this resolves your issue, if the issue persists, please remove all custom code and see if the issue persists.

 

Also, can you provide us with your PHP info please, as well as enable PageLines debug mode. (PageLines > Site Options > Advanced).



#3 barryevans

barryevans

    Advanced Member

  • Members
  • 30 posts
  • LocationDorset
  • Framework Version:2.4.1
  • Country: Country Flag

Posted 26 March 2013 - 02:41 PM

Thank you for your reply,

 

Unfortunately I have restricted access on the IE8 machine, so I am unable to install Jing. However I have provided two screenshots on my previous post which shows the before and after state. When the page is loading it jumps from the layout in the first screenshot to the layout in the second.

 

Removing all CSS custom code makes no difference, I still see the content move/jump when the page loads, albeit in a different position.

 

I have also tried disabling all non Pagelines plugins, but that makes no difference

 

Pagelines debug mode has been turned on.

 

PHP info to follow shortly, I don’t have FTP access at the moment.

 

Thanks,

 

 



#4 barryevans

barryevans

    Advanced Member

  • Members
  • 30 posts
  • LocationDorset
  • Framework Version:2.4.1
  • Country: Country Flag

Posted 26 March 2013 - 07:46 PM

PHP configuration can be found here

 

Please Login or Register to see this Hidden Content

 

Thanks,



#5 barryevans

barryevans

    Advanced Member

  • Members
  • 30 posts
  • LocationDorset
  • Framework Version:2.4.1
  • Country: Country Flag

Posted 27 March 2013 - 01:47 PM

Please could you advise the next best steps in order to troubleshoot/resolve this issue.

 

Thanks,



#6 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 27 March 2013 - 02:05 PM

Hello Barry 

 

Having tested this on IE 8 and 9 i cannot replicate the issue - have you managed to resolve this? 



#7 barryevans

barryevans

    Advanced Member

  • Members
  • 30 posts
  • LocationDorset
  • Framework Version:2.4.1
  • Country: Country Flag

Posted 27 March 2013 - 02:19 PM

Hi Martin,

 

Thank you for you reply,

 

No - this isssue has not been resolved, I have just tested this on two different IE8 machines and still see the same behaviour.

 

I see the issue on all pages, have you tried clicking between the pages on the site, also it maybe worth trying a Ctrl + F5 to force a refresh.

 

Thanks.



#8 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 27 March 2013 - 02:50 PM

The only way for us to test IE8 is to use browserstack, and here is what we see:

 

Please Login or Register to see this Hidden Content



#9 barryevans

barryevans

    Advanced Member

  • Members
  • 30 posts
  • LocationDorset
  • Framework Version:2.4.1
  • Country: Country Flag

Posted 27 March 2013 - 03:47 PM

I too have test using Browser stack.

 

For some reason when my site loads on Browserstack it is extremely slow.

 

What you are seeing is the pre jump positioning.

 

If you wait until the home page has loaded, click refresh, wait a further ~100 seconds (I have no idea why it takes that long, but please bear with it) you will see the content jump I am referring to.

 

Worth noting, when I load this page on a physical IE8 device, the page content jumps within a sec or so of loading - It is only the on the Browserstack enviroment the page hang for 1-2 mins.

 

Thank you for you help with trying to understand this issue.



#10 perrknight

perrknight

    Member

  • Members

  • 19 posts
  • Country: Country Flag

Posted 27 March 2013 - 11:57 PM

I am having the exact same issues in IE8, plus FontAwesome icons are not working. I currently have the Google Compatibility Script turned off, as it is causing additional problems when turned on since the last update. Unfortunately, I have to support IE8.



#11 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 28 March 2013 - 05:17 AM

@perrknight are you able to do a quick video cast using Jing so we can show the core/dev team.

 

@barry i've tried on browser stack but I can't see it jump on there, did wait for a long time but nothing. I have created a bug report for the similar case you linked in your original post. I think the reason it's jumping is because the browser specific css kicks in after the page loads, if you take it out you do you just get left with the white gaps like Mitz did on the other thread?



#12 barryevans

barryevans

    Advanced Member

  • Members
  • 30 posts
  • LocationDorset
  • Framework Version:2.4.1
  • Country: Country Flag

Posted 28 March 2013 - 06:24 AM

Thank you for raising the bug report, to clarify I still see the page content "jump" even with all custom CSS removed.

 

I agree with your comment that something changes when the page loads, but I think more likely that this is related to the Google compatibility script, as when turned off the issue disappears.

 

However with the compatibility script turned off, my site content is not displayed as indented

 



#13 Danny

Danny

    Is Awesome!

  • Moderators
  • 16563 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 28 March 2013 - 06:43 AM

Hi,

 

James as reported this possible issue. However, you're using negative margins to position the Business Branding section, negative margins in my opinion are a bad idea to position elements as it can cause all kinds of issues. I highly suggestion you find an alternative method to position your Business Branding section.



#14 barryevans

barryevans

    Advanced Member

  • Members
  • 30 posts
  • LocationDorset
  • Framework Version:2.4.1
  • Country: Country Flag

Posted 28 March 2013 - 06:46 AM

James, thank you for you reply - I will see what I can do to eliminate the negative margins.

 

However, as mentioned in my previous post, I still see this issue with all Custom CSS removed, so therefore I assume that this is not related?



#15 Danny

Danny

    Is Awesome!

  • Moderators
  • 16563 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 28 March 2013 - 06:51 AM

I never mentioned that the negative margins was related to the issue, I was simply informing you that negative margins shouldn't really be used to position a element.

 

The issue has been reported by James.



#16 barryevans

barryevans

    Advanced Member

  • Members
  • 30 posts
  • LocationDorset
  • Framework Version:2.4.1
  • Country: Country Flag

Posted 28 March 2013 - 06:53 AM

OK Danny, thanks for the tip - I figured it was a bit crude but it was the only way I could figure to do it.

 

Thanks



#17 Danny

Danny

    Is Awesome!

  • Moderators
  • 16563 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 28 March 2013 - 10:44 AM

No problem, happy to help.



#18 idea15

idea15

    Advanced Member

  • Members
  • 58 posts
  • Country: Country Flag

Posted 03 April 2013 - 12:06 PM

I am having a very strange issue with IE8 too. I have the site layout set to the primary sidebar on the left, content in the middle, and the secondary sidebar on the right. In IE8 only, and in custom post types only, the primary and secondary sidebars are being pushed below the content in the middle column.

 

This should look correct:

Please Login or Register to see this Hidden Content

 

This is IE8: (attachment)

 

It's not doing this for the regular pages such as

Please Login or Register to see this Hidden Content

- only those in the custom post type magazine.

 

It is doing this regardless of whether or not the Google IE compatibility fix box is ticked.

Attached Files



#19 Danny

Danny

    Is Awesome!

  • Moderators
  • 16563 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 03 April 2013 - 12:17 PM

This is what I am seeing on BrowserStack.

 

Please Login or Register to see this Hidden Content

 

Therefore, make sure compatibility mode is not enabled.



#20 idea15

idea15

    Advanced Member

  • Members
  • 58 posts
  • Country: Country Flag

Posted 03 April 2013 - 12:23 PM

That's totally bizarre. 20 minutes ago Browserstack was putting the sidebars under the content. I'll keep at it.







Also tagged with one or more of these keywords: ie8