“噢，啪！” 检查Chrome中的元素时出错

Question

Whenever I inspect any element that's part of my navigation menu, OR inspect element and then browse to a navigation menu I get the 'Aw, Snap' error in Google Chrome. I figured there must be something wrong with the source but after reviewing the source in an editor it seems as though everything is correct in format.

What might be causing this error?

You can Click Here to view the site :)

Update:

Something in this code here is causing the error:

<li>
    <a id="nav-corporate" class="accordionButton <?php if (is_page(1635) || is_page(1909)) { echo "curr-page-nav";}?>">Corporate</a>
<div class="sub-list-container">

    <ul>
        <li>
            <a href="<?php echo get_page_link(1635); ?>" id="nav-meeting" class="subitem"><span class="nav-hidden">Meetings</span></a>
        </li>
        <li>
            <a href="<?php echo get_page_link(1909); ?>" id="nav-event" class="subitem"><span class="nav-hidden">Events</span></a>
        </li>
    </ul>
    </div>
    </li>

I have tried on three computers by the way.

Answer 1

The problem appears to be an issue with your style.css file. In that file, you have:

/*::selection {
    background: #666; /* Safari */
    color: #FFF;
}

::-moz-selection {
    background: #666; /* Firefox */
    color: #FFF;
}*/

What's happening is you have a comment /* Safari */ within a broader comment around the entire snippet above, which is closing the broader comment prematurely and causing a parse error for the CSS. Google Chrome is choking on the malformed CSS file, which is causing the "Aw, snap!" error to occur when inspecting elements.

Removing the /* Safari */ comment won't fix that problem, as the /* Firefox */ below it causes the same issue.

EDIT: While that did fix a minor issue with the CSS, it wasn't the whole solution. In light of thakis ' answer below, fixing the following style does prevent the crashing when inspecting elements:

#navigation-menu-container{
  border-image:  url(images/shadow-border.png) 10 stretch;
}

Compare this fiddle , which is a copy/paste of the site code in question (all head tags and relevant html markup), with the corrected fiddle , in which the style.css markup has been imported into the fiddle and the #navigation-menu-container rule has been changed to the above code, and you'll see that the fiddle page doesn't crash.

Answer 2

When chrome crashes, please file a bug at http://new.crbug.com so that the chrome developers can fix the problem. (I've filed http://crbug.com/141139 for this issue for you). Ideally, try making a copy of your site and keep removing things from the copy until you have a small test case that still reproduces the problem. Then attach that to the bug.

Edit: Looks like this bit from your style.css causes it:

#navigation-menu-container{
  border-image:  url(images/shadow-border.png) stretch 10;
}

border-image needs its numbers in front of stretch (see eg http://css-tricks.com/understanding-border-image/ ), and Chrome gets confused by that not being the case. Moving the 10 in front of stretch fixes the crash (but the crash is still a chrome bug of course).