Forums
View unanswered posts | View active topics It is currently Wed Aug 20, 2014 4:25 pm



Reply to topic  [ 10 posts ] 
 PIE page crashes IE8, pervasive layout problems 
Author Message

Joined: Fri Oct 05, 2012 10:07 am
Posts: 8
Location: Dublin, Ireland
Post PIE page crashes IE8, pervasive layout problems
http://cosd.com - live page, showing correct function in modern browsers, and PIE commented out
http://cosd.com/home-pie - problem demo page with lines for PIE uncommented

I have a site using modernizr.js and respond.js, in canonical forms downloaded from the HTML5 Boilterplate "Initializr." (It's a responsive site with media queries for IE implemented in Javascript.) The site also has Mootools, among the standard Javascript components for Joomla. It works fine & consistently between Firefox & Chrome with no positioning problems. It's also set up to use HTML5 mobile boilerplate but I've commented out this code since it generates errors in IE8, though the code appears unrelated to PIE.

Main problem: IE8 crashes at some point during page rendering. According to the progress meter on the status bar, the page never finishes initially loading. I don't even know if it's finished rendering since the features change as the page loads, while it says it is downloading assets.

I can't reload the page after Internet Explorer hangs. I've seen this problem on all computers I've tested, two so far, with IE8. On my more reliable testing machine, IE8 is using about 250meg of memory just displaying a single window with the bad page (compared to about 50meg when displaying Google's page).

I've been through the Known Issues and according to my understanding they should all be corrected in my case by introducing "position: relative" to the property lists for all PIE elements. In fact this is compiled into my template using LESS.

Style problems at the point where the browser crashes (all visible at screen widths >= 768px):
  • instead of the site's solid-colour background (grey), the site has a different solid colour, one of the endpoints or midpoint (the fallback colour) of the blue gradient.
  • the box-shadow'd, border-radius'd, linear-gradient'ed header box appers to span the whole page.
  • the header element, with the three features above, is of the wrong size and in the wrong position... as I view it now, the text breaks into two lines but the border box only spans the second line.
  • text items respond to hover states, but PIE elements (like items) don't.
  • there are several box-shadow'd, border-radius'd, linear-gradient'ed boxes that each contain text and a single floating image. These boxes all display perfectly, but the paragraphs of text before and after them do not (or they are obscured by the deep blue solid colour background).
  • there is an unwanted feature, not in my layout: a black box with box-shadow, near the bottom of the page, that I don't see how could be related to any of my page features.
  • the footer, like the header, is also missing its gradient and the position and dimensions of its border box are wrong. The size and position of the footer box sometimes correct themselves when I am not even focused in the window.
  • the buttons and menu items appear to respond to hover states after substantial delays. There's also a substantial delay in using the scroll bar.

I realise some of these problems are caused by the browser crashing, as with an endless loop or memory leak. I can certify that each browser is otherwise working normally, and the two machines I've tested this on are both problem-free with one of them being a very clean VM that I only use for cross-browser testing.

(edit: second problem) Related: I have another similarly configured site, http://sl.cosd.com - with features not as scrambled: only a single problem. On this site the template is practically the same, with PIE being invoked in the same way, the same container hierarchy & relative positioning for PIE elements. The only problems with that site, relative to standards-compliant browsers, are:
  • the image background of a transparent region of the header, where the gradient of the container is supposed to show through, is instead showing black. This looks nice but it's not the intended effect, which you can see in modern browsers.
  • The floating boxes don't line up into rows but I've figured out that the nth-child selectors used for clearing the boxes are changed by the extra PIE elements being added into the DOM, so I've got this one worked out.

Thank you for pointing me in the right direction. I know many people are using PIE in production and I sincerely hope to find what I'm doing wrong, especially why it might be working on the latter site, to apply these basic features to commercial designs in the next 2 or 3 years. I'm fascinated by the potential of PIE and really want to isolate my remaining problems with it.


Last edited by rphair on Sat Oct 13, 2012 10:08 am, edited 2 times in total.



Fri Oct 05, 2012 10:30 am
Profile WWW

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post Re: PIE page crashes IE8, pervasive layout problems
It's not necessarily the source of your problems, but I notice there is at least one HTML nesting error in your code: an extra opening <div> right before the closing </header>. It's possible that this is confusing IE.


Fri Oct 05, 2012 4:12 pm
Profile

Joined: Fri Oct 05, 2012 10:07 am
Posts: 8
Location: Dublin, Ireland
Post Re: PIE page crashes IE8, pervasive layout problems
Dear Jason: you are absolutely right, that was the source of the most major problems. My sincere apologies... that tag showed up as a closed, matched pair in the debugger I use (Firebug). I'll be on the lookout for mundane problems like that in the future & run through a validator just to be sure.

Fixing the <div> tag mismatch fixed most of the problems, and stopped IE8 from crashing. The gradient box around the page title was still in the wrong position, but I removed a :first-child selector from that element (interpreted by selectivzr.js, I think) and that cleared it up. Everything has been working as expected after those two changes and the first site (http://cosd.com)is working on IE as in modern browsers (except for a gradient on <body> which I'll be fixing later).

Jason, I thank you very sincerely, your personal attention is most welcome as I try to get on my feet with this. I still don't understand what is happening with my second site based on a nearly identical template (http://sl.cosd.com).

At the time of my last posting this site appeared to be working normally. I disabled the Javascript that was generating errors (from Mobile Boilerplate) and corrected a syntax error, like the one above, that modern browsers are more tolerant of. I've validated my code (at least on that page). But I'm now seeing problems with the other site, like I had with the first one:
  • hanging during page load - saying "(8 items remaining)" or "(11 items remaining)" and still running a progress bar
  • not showing hover states
  • gradient backgrounds displaced from the elements they contain
  • empty or black regions
I may not have noticed these problems at first because the browser sometimes times out after saying (X items remaining) but when I click into another page, or a few pages in a row, IE8 always hangs again with the above symptoms after no more than a half-dozen page clicks.

I've been testing for over an hour and need to update this article in case others are looking at this issue. I'll continue to check and will post if I find anything conclusive, or a pattern to what makes it hang.


Fri Oct 05, 2012 5:46 pm
Profile WWW

Joined: Fri Oct 05, 2012 10:07 am
Posts: 8
Location: Dublin, Ireland
Post Re: PIE page crashes IE8, pervasive layout problems
more on the above: I've just come up with a set of conditions I can reproduce, on Windows XP:
  • Kill any IE8 windows & processes that may be running. Run Task Manager.
  • Open IE8 directly on the URL http://sl.cosd.com (I am doing this from a desktop URL shortcut).
  • The page displays with most features, and some of the anomalies above.
  • The status bar says "(8 items remaining)".
  • Meanwhile, the Task Manager shows "iexplore.ie" is eating memory... for example, 900 meg in 4 minutes.
  • I can go to other web pages on the site and observe hover states on the page items, while watching IE continue to grow in memory size.
  • The process "iexplore.ie" doesn't die after closing the window; it must be done manually from the task manager.
This process is repeatable, at least for me. I've done it 3 times in a row now, every time with the same memory leak. I'll leave the site as it is until someone can have a look & please let me know if there is any more information I can gather.


Fri Oct 05, 2012 6:24 pm
Profile WWW

Joined: Fri Oct 05, 2012 10:07 am
Posts: 8
Location: Dublin, Ireland
Post Re: PIE page crashes IE8, pervasive layout problems
dear Jason: after a weekend of testing I have some more information. I will post here immediately if I ever find a Windows XP / IE8 machine on which this doesn't happen... I'll keep looking.

The two layouts in this thread use PIE in the same way, so I've gone back to my first layout. (The second layout, http://sl.cosd.com, in my last posting is still untouched.) On both layouts, a shadowed black box appears when certain styles are used, in either layout. When certain PIE features are used, IE becomes unresponsive, eats memory, and has to be killed by hand.

For clarity's sake, and thinking this might be the problem, I've edited the first layout, on the home page & whole site http://cosd.com, to remove the sometimes redundant PIE behavior and position: relative declarations that were compiled into the CSS. This had no effect on the problem. This site has only been working normally since I have removed the drop shadow on the smaller boxes in the left sidebar (screen must be >=768px to see these).

I've made a test page with these drop shadows still applied, visible here: http://cosd.com/home-pie - the CSS files for the two pages (compared in the same order below) are nearly identical:
Code:
[511] anjaneya% diff c5bp/css/template.css c5bp-pie/css/template.css
790a791,792
>   position: relative;
>   behavior: url("/PIE.htc");
The test page doesn't crash IE8, but when the style declarations above are left in the CSS and the elements they apply to are removed from the layout (by removing from the source, not display: none), a blurry black box appears, IE8 is unresponsive, eats memory, etc... and I'm back to square one. You can see this second test page at http://cosd.com/home-xp.

In case this seems like a no-brainer, since I can work around the problem somehow:
  • The offending feature on the page http://cosd.com/home-xp is only a single drop shadow, well within the scope of PIE as I know people are using on production sites, and I don't see how a single element can cause a problem when the rest of the performance is robust.
  • Every day I have modified my CMS template (as designers often have to do while debugging production sites, when they can't afford "black box" anomalies) the problems in this thread have come back. If there are limitations to how PIE can be used (or known issues as yet undocumented) I need to be aware of them.
  • I am still having the problem on the site http://sl.cosd.com which contains no unpublished elements. This site doesn't always crash IE8 immediately, but always does within clicking through a half-dozen links, just as any Internet visitor would.

It's now my top priority to do help in any way I can to define & help fix this problem. I sincerely appreciate Jason's help and development for what I could never do. My contribution will be to help bring this tool to our local business community while standards-resistant IE dies a slow, quivering death.

I'm also trying to help the global community by documenting as much as I can... if it's not an outstanding bug in PIE, then it's an error of my own that other designers are very likely to make (one not already listed in the FAQ), and hopefully my experiences will help them. Therefore I hope to hear from someone soon.


Mon Oct 08, 2012 7:07 am
Profile WWW

Joined: Fri Oct 05, 2012 10:07 am
Posts: 8
Location: Dublin, Ireland
Post Re: PIE page crashes IE8, pervasive layout problems
addendum to my previous message: I found that PIE behaviour was still crashing site (http://cosd.com), when it was previously working as described above with only one of the box-shadows disabled. It, as well, eventually projected a fuzzy black box on the screen & suffered memory leaks. The exact behaviour depended upon the timing in which pages were are visited. True for all IE8 systems we can get our hands on.

Until I hear from someone about what is happening, we will have to pull out PIE for IE8. I've rewritten my style sheet so PIE behavior (and relative positioning) are only added for a conditional IE9 class added in the <html> a la HTML5 boilerplate. The site is up and running now with gradient support in IE9 and all PIE features disabled for IE8. (The line numbers quoted above will be much different now. :) )

The buggy layouts are still clearly visible on http://cosd.com/home-xp and http://cosd.com/home-pie -- note that these are only alternative CSS for the home page itself, and clicking on the links in them will go through to the pages that have PIE removed as above. The problem can still be reproduced on both these pages by reloading the pages, changing screen width, et cetera.

We'd love to put PIE back in for all IE versions as the documentation suggests, would love to hear about what could be happening & how we might fix it, or provide more diagnostic info, or if we should wait for a patch. Standing by.


Mon Oct 08, 2012 10:02 am
Profile WWW

Joined: Sun Oct 14, 2012 10:27 pm
Posts: 1
Post Re: PIE page crashes IE8, pervasive layout problems
I am having similar issues with pie crashing IE8. I have two Drupal 7.15 sites, using the css3pie 7x-2.1 module. When I aggregate and compress css files in Drupal, IE hangs trying to load the page. Based on the module instructions everything is loaded correctly - module in sites/all/modules/css3pie and PIE libraries in sites/all/libraries/PIE. Currently I have this only on my local development sites - one Linux Ubuntu Apache, the other is wamp Uniformserver. The module, through another module Ctools, writes a css file with the css selector and location or PIE declared. I have used the three versions of PIE e.g. htc, php wrapper, and js. The htc and php versions work without aggregation. The js version kicks back errors. The Drupal css3pie module maintainer said to post on the pie forum, not his problem.

This forum thread was the only one I found that comes anywhere close to describing the IE8 behavior. Any help would be appreciated. The live site for this does not have it installed, but I can make it be that way.


Mon Oct 15, 2012 9:27 am
Profile

Joined: Fri Oct 05, 2012 10:07 am
Posts: 8
Location: Dublin, Ireland
Post Re: PIE page crashes IE8, pervasive layout problems
I would vote also for the suggestion that there's a conflict between PIE and some standard Javascript features, maybe respond.js in my case (a la this issue). My live page http://cosd.com/home-pie still reproduces the problem immediately, complete with memory leak and IE crashing, as soon as the IE8 user changes the window width.


Mon Oct 15, 2012 10:30 am
Profile WWW

Joined: Fri Oct 05, 2012 10:07 am
Posts: 8
Location: Dublin, Ireland
Post Re: PIE page crashes IE8, pervasive layout problems
I've isolated the problem in this case; it's definitely a conflict between PIE and Respond.js:
  • First: Separating modernizr.js from respond.js (they are together in HTML5 boilerplate and built that way by the Intializr) didn't fix the problem.
  • After that: Upgrading respond.js to current version from Github (1.2.0) didn't fix the problem.
  • After that: Removing respond.js fixed the problem.

The site above (problem version still on http://cosd.com/home-pie) is now working beautifully (showing my narrow-viewport layout no matter what the screen width), with all gradients, box shadows, and rounded corners working normally; no delays, no memory leak, no browser crashing; in IE8.

Score one for this reported PIE issue on Github, although not clear to me whether this can be called an issue with PIE or Respond.js. If it's possible for the two to work together, I hope it will be announced here or on that link in Github.


Tue Oct 16, 2012 7:07 am
Profile WWW

Joined: Fri Oct 05, 2012 10:07 am
Posts: 8
Location: Dublin, Ireland
Post Re: PIE page crashes IE8, pervasive layout problems
A bit more testing: to be more specific, the problem only appears when the media queries are invoked. When displaying the problem layout http://cosd.com/home-pie in a narrow viewport (< 480px width, no media queries), the problem doesn't appear even when respond.js is included.


Tue Oct 16, 2012 8:28 am
Profile WWW
Display posts from previous:  Sort by  
Reply to topic   [ 10 posts ] 

Who is online

Users browsing this forum: Google [Bot] and 3 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.