My company (Rite in the Rain) has a web page that quit working properly after the upgrade. The "flip" action and the "grow" action now malfunctions. The flip action is an extension from DMXzone. It works in safari, rockmelt, chrome, and ie. Here is the link to our problem web page:
Any information you have would be greatly be appreciated!
Marketing Department Rite in the Rain (Email removed by mod)
- All posts
- Helpful Solutions
The error console is not happy with the way the script is changing the transform property, but I'm not sure of the exact objection.
MDN page on transform: https://developer.mozilla.org/en-US/docs/CSS/transform
I notice that the HTML has a lot of nesting. For example:
<br /><br /> <div> <div> </div> <div><img src="images/site/coolstories/Coolstories_167front.png" style="position:absolute;TOP:1175px;LEFT:320px"alt="" width="270" height="405" border="0" usemap="#MapMap9" onclick="flip(this, 28, 'images/site/coolstories/Coolstories_167back.png', 0.8, 'swing');MM_effectGrowShrink(this, 1000, '100%', '150%', true, false, false)" /> <map name="MapMap9" id="MapMap9"> <area shape="rect" coords="38,475,380,599" href="http://www.riteintherain.com/inventory.asp?CatId=%7B950DADEB-D1CC-43F4-A927-59D5A4850499%7D" target="_parent" /> </map> </div> <br /><br />
Note that the opening <div> isn't closed, so the images nest deeper and deeper. Not sure whether this is affecting the script, but it probably doesn't help.
I also see some errors in the web console;
FB.getLoginStatus() called before calling FB.init(). SyntaxError: syntax error @ http://www.riteintherain.com/WEB%20FORM%20TESTING/Coolstories%206-25/ScriptLibrary/jquery-latest.pack.js:1
(caused by missing files: 404 — PAGE NOT FOUND) TypeError: document.getElementById(...) is null @ http://www.riteintherain.com/static.asp?htmltemplate=coolstories.html:425
Firefox also complains about missing spaces between attributes in the image tags that show red in the page source.
You can hover such a red text to see a tooltip about that error (i.e. Stray start tag "div")
Thank you so much for the responses but I have taken the file down to the bare bones and the transform will not work. I think the problem might be in the script below?
There is a bug introduced in Firefox 18 affecting transforms and fixed position elements that is targeted to be fixed in Firefox 21: https://bugzilla.mozilla.org/show_bug.cgi?id=827577. Although you are not setting position fixed in your CSS, the scripts seem to use position:fixed at some points (it would take hours for me to really understand them, however). I'm not sure how you would test this possibility; I think you would need to install a current "nightly" version of Firefox. I also don't know whether there is a temporary patch for this that you could make to your script.
Yes, I did use a fixed positions for the cards. This might explain the problem! I am now very anxious for Firefox 21. In the meantime I guess I will have to rebuild the page and look for a compatible solution. Thanks again!