colorbox errors

a9ka9k Member
in Bugs & Feature Requests edited March 2011
I've spent a couple hours today trying to figure out what's up with colorbox. I have a very simple page set up using your example code and some extra links to "real" products at my test store which is really a staging store for a client.

The problem ONLY shows up in Chrome (latest) and only in a new window. Colorbox does its overlay, animates a white box filling and then all of it disappears except some edge pieces. Hard to describe so here's a screen shot.

Usually after that no amount of back and clicking new products gets the cart displayed. That would be a disaster with some of our doddering customers that thing their email goes to AOOL.COM.

Currently, foxycart's version of colorbox fails w3c validation -- 11 errors. I doubt css is the problem though. There is also a format error: "Resource interpreted as Script but transferred with MIME type text/plain." on the call back to cart.php with cart=get output=json. Shows error in cart.php line -1 because its AJAX magic.

I wish there was a Chrome tool to compare DOM of two windows.

Test page is http://solari.com/badbox/

EDIT - moved test page to faster server
Comments
  • a9ka9k Member
    edited April 2011
    Thank goodness you can select a dom element in the Chrome inspector and then COPY and get an HTML fragment in your copy buffer.

    I was able to use diff on identically sized windows, one good colorbox, one bad colorbox. Here's the results:
    @
    -    <div id="colorbox" style="padding-bottom: 0px; padding-right: 0px; display: block; width: 700px; height: 450px; top: 176px; left: 268.5px;" class="">
    +    <div id="colorbox" style="padding-bottom: 42px; padding-right: 42px; opacity: 1; cursor: auto; display: block; height: 408px; top: 176px; left: 268.5px; width: 658px;" class="">
           <div id="cboxWrapper" style="width: 700px; height: 450px;">
             <div id="false" style="">
               <div id="cboxTopLeft" style="float: left;"></div>
    -          <div id="cboxTopCenter" style="float: left; width: 700px;"></div>
    +          <div id="cboxTopCenter" style="float: left; width: 658px;"></div>
               <div id="cboxTopRight" style="float: left;"></div>
             </div>
             <div id="false" style="clear: left;">
    -          <div id="cboxMiddleLeft" style="float: left; height: 450px;"></div>
    -          <div id="cboxContent" style="float: left; width: 700px; height: 450px;">
    -            <div id="cboxLoadedContent" style="width: 700px; overflow-x: auto; overflow-y: auto; height: 450px;">
    -              <iframe frameborder="0" class="cboxIframe" name="cbox1301536898217" src="https://a9kbiz.foxycart.com/cart?name=1 month subscription&amp;amp;price=30&amp;amp;category=Subscriptions&amp;amp;code=s1m&amp;amp;sub_frequency=1m&amp;amp;fcsid=p1mgkb2drprkb36cr47a1r8s57&quot;&gt;&lt;/iframe&gt;
    +          <div id="cboxMiddleLeft" style="float: left; height: 408px;"></div>
    +          <div id="cboxContent" style="float: left; width: 658px; height: 408px;">
    +            <div id="cboxLoadedContent" style="width: 658px; overflow-x: auto; overflow-y: auto; height: 380px;">
    +              <iframe frameborder="0" class="cboxIframe" name="cbox1301536883401" src="https://a9kbiz.foxycart.com/cart?name=1 month subscription&amp;amp;price=30&amp;amp;category=Subscriptions&amp;amp;code=s1m&amp;amp;sub_frequency=1m&amp;amp;fcsid=p1mgkb2drprkb36cr47a1r8s57&quot;&gt;&lt;/iframe&gt@
                   <span>«</span> Continue Shopping
                 </div>
               </div>
    -          <div id="cboxMiddleRight" style="float: left; height: 450px;"></div>
    +          <div id="cboxMiddleRight" style="float: left; height: 408px;"></div>
             </div>
             <div id="false" style="clear: left;">
               <div id="cboxBottomLeft" style="float: left;"></div>
    -          <div id="cboxBottomCenter" style="float: left; width: 700px;"></div>
    +          <div id="cboxBottomCenter" style="float: left; width: 658px;"></div>
               <div id="cboxBottomRight" style="float: left;"></div>
             </div>
           </div>
    

    SO the BIG difference is first line's style. (padding-bottom: 0px) Other differences are all h/w changes because there is no padding in the bad version.
    We are missing "opacity: 1; cursor: auto;" in the bad version.

    Don't you love exotic bugs? Any ideas?

    EDIT: highlight problem in style.
  • brettbrett FoxyCart Team
    foxycart's version of colorbox
    Just to make sure it's clear, our version is fully standard. We do have a modified theme, but that's it.

    What version of Chrome are you using? I'm trying on 11.0.696.28 beta and not seeing what you're seeing, so my hunch is that it might be a caching issue or something. We _did_ see something oddly similar in IE9 two weeks ago, but (super super strangely) it up and disappeared. I saw it in the evening, as did the reporter, but in the morning neither of us could replicate the behavior.

    Do you have specific steps to make it happen?
  • a9ka9k Member
    edited April 2011
    SO there is a color box problem, you saw it and it went away - my least fav kind of bug. It isn't fixed just hiding waiting for perfect conditions.

    I'm bug reporting to FoxyCart because you deal with colorbox all the time, may have seen this and it's failure makes purchases impossible which is a very very bad thing. I want FoxyCart solid or my life will be tech support hell. And there is a deadline - April 15 or Paypal start charging us extra for not using express buttons.

    Proceedure:
      [li]open new tab[/li]
      [li]paste and go to
    http://solari.com/badbox/[/li]
    [li]click monthly sub[/li]
    [li]if you see a good box, go to step one (no need to restart chrome or close foxy colorbox, just new tab. You can leave old tabs open)[/li]


    Results: frequency of no box. All test on Chrome 10.0.648.204 (non-beta most up to date version)

    [ulist]
    [li]MacBookPro Snow Lepard (core duo), many developer tools installed in chrome -- Usually dies on first, sometimes takes 3 tries.[/li]
    [li]iMac (i3) Snow Lepard, no tools - Ran 25 tabs, no problem.[/li]
    [li]Window Vista (AMD Phenom 9850) PC, no added tools - Seems to take about 5 tries before failure.[/li]
    [/ulist]

    As a long-in-tooth real time assembly lang program (did pinball programming) - this smells like assumed condition not always valid at the time of execution. Something to do with the calculation of the MARGIN for sure. In old days, it could be an uninitialized variable, a bad address (bad ptr, moved block of allocated memory, use of deleted object), a race condition in multi-tasking (no semaphore) or stack overflow into data space.

    I'm going to install JSure on a local ubuntu box and check colorbox. (epic fail - JSure project fairly dead)

    Oh look MORE joy - found a bug in forum ulist formatting

    EDIT - change site link to faster server, no jsure. Found problem with ulist
  • a9ka9k Member
    edited April 2011
    I used to use JSure to check javascript but is seems to be a dead project. JSLint not much use on large blob of JS.

    Sent Colorbox author an email ref'ng this discussion.

    Keeping track of failures on the test page at http://solari.com/badbox/

    Edit: added latest status
  • a9ka9k Member
    IE 8 fails a different way. It diverts directly to the price link - no box at all!?!
    See screen shot at http://solari.com/badbox/
    I'm going onto something else for a while, before brain-splode.
  • a9ka9k Member
    Just got a reply from Jack Moore:

    On Apr 1, 2011, at 2:54 PM, Jack Moore wrote:

    You should always load colorbox's stylesheet before the JavaScript.
    The script needs the style from the CSS to be present when it does
    it's calculations to determine colorbox's width and height. Depending
    on the cache/browser/connection the JS may run before the CSS has been
    applied. I imagine that is the source of your problem.
  • lukeluke FoxyCart Team
    Wow... very interesting. We just rolled out an update to the admin's sample code to move the css file before the js file includes. Thanks a9k! These types of bugs are often the worst ones to figure out, especially when they involve third-party tools.
  • brettbrett FoxyCart Team
    Man... I'm sorry. I knew that. I'm surprised that we had the CSS after the JS in the sample code. That's definitely our bad. Thanks for helping us make that change. Sorry it took so long for you to diagnose.
  • sparkwebsparkweb Member, Integration Developer, FoxyShop, Order Desk
    Wow, that's really good to know. I will roll this out in the next version of FoxyShop too. Haven't heard about this behavior from anyone, but you never know. Always good to get things right....
  • brettbrett FoxyCart Team
    It's generally more an issue with a FOUC (flash of unstyled content) than with things just hard core breaking like in this case, but it's almost always a good idea to do CSS first, then JS.
Sign In or Register to comment.