html5 site does not work correctly on FireFox
I have implemented a css rotating cube http://www.associationtsunami.org/ both on Chrome and Safari the 'Les Artistes' side of the cube displays correctly, but on FireFox the background image of the div #st_main is incorrect and also the menu is not functioning.
the code for this side of the cube is as follows: http://pastie.org/5401955
and the javascript that builds the menu and adds the image: http://pastie.org/5401947
full code can be found https://github.com/AssociationTsunami/tsunami
also, when you click on the 'Play' button on one of the cube sides, both Safari and Chrome plays the music, but on FF does not seem to work!
when i inspect the code with Firebug, I don't have any errors so i am unsure how to track the issue. any advice on how to fix this website to work on Firefox?
Modified by nkhine
All Replies (7)
its working fine for me. Your using FF 15.0.1 please update your firefox to FF 16.0.2
hi i just updated to 16.0.2 and get the same problem, first screenshot shows on FireFox 16.0.2 and the second on Chrome
I'm not seeing a source (src) attribute in the audio tag like there is in Google Chrome and that audio file is also send as video/mp4 which isn't supported by Firefox.
Firefox:
<audio preload="metadata" id="jp_audio_0"></audio> Google Chrome:
<audio id="jp_audio_0" preload="metadata" src="audio/01_Tribu.m4a"></audio>
A good place to ask advice about web development is at the MozillaZine "Web Development/Standards Evangelism" forum.
The helpers at that forum are more knowledgeable about web development issues.
You need to register at the MozillaZine forum site in order to post at that forum.
thanks, i have fixed the audio player issue; all i had to do is convert the m4a format to .ogg and add it the my code.
have posted on http://forums.mozillazine.org/viewtopic.php?f=25&t=2619539
You're welcome.
I notice that in Google Chrome the animation is smooth although sometimes it doesn't seem to notice a mouse release and starts rotating uncontrolled with the mouse button not pressed. In Firefox it is almost not possible to control the rotation as everything moves too fast. I don't know which CSS rules control that animation and if they are the correct rules for current Firefox version that support most of those rules unprefixed with -moz.
You can try to check out the docs on MDN.
i have increased(decrease) the response of the cube, so now it turns more slowly https://github.com/AssociationTsunami/tsunami/commit/a4b07aa13f03ac129ac48cee02f89389c897b648#L31R44
which i find it works well on FF and also i added, as per 'patrickjdempsey' recommendations the 'user-select' (http://forums.mozillazine.org/viewtopic.php?f=25&t=2619539) to none https://github.com/AssociationTsunami/tsunami/commit/a4b07aa13f03ac129ac48cee02f89389c897b648#L4R63 although sometimes when you click on the cube the text is still selected which is a bit strange as i have specified it to none.
Yes, the music now plays for me.
The menu seems to be working in Firefox if I change this ul.menu rule from position:fixed to position:relative
/* Navigation Style */
ul.menu{
list-style:none;
font-family: "Trebuchet MS", Arial, sans-serif;;
font-size: 15px;
font-style: normal;
font-weight: normal;
text-transform:uppercase;
letter-spacing: normal;
line-height: 1.45em;
position: relative;
bottom:0px;
left:0px;
width:300px;
height:100%;
}
It still isn't working smoothly in the current Firefox 20a2 Nightly build, but Firefox 17 seems to work.