Firefox 19.02 breaks background image position.
Hi, I have a jQuery Plug-in that worked fine until I downloaded Firefox 19.02 now the Image Slider does not work.
Specifically the backgroundImage position does not appear to be working. Instead of each piece of the image being selected using a specific and different top and left (x and y position on the Image) all of the pieces are showing the top left corner! This worked fine in the earlier version of Firefox and still works on the latest versions of Google Chrome, Safari, and Opera.
Appreciate any help you can offer.
TC
Chosen solution
That makes sense. If Math.abs(yPos) works, then yPos can't be a string and therefore can't contain units.
Read this answer in context 👍 0All Replies (6)
Can you provide a link to a page demonstrating this problem?
Hi jscher2000,
Sorry for the delay the plug-in is in development so I had to upload to give you a working version. The link is Link to broken plug-in .
I also went to another workstation that had not yet updated Firefox and got the following images:
Your assistance is greatly appreciated.
TC
I see the problem, but I'm not completely sure of the cause.
Firefox's Error Console fills up with style warnings along the following lines:
Timestamp: 4/1/2013 12:03:30 PM Warning: Error in parsing value for 'background-position'. Declaration dropped. Source File: http://www.terracegraphics.com/60imagelayer/ Line: 0
Line: 0 indicates that the error can't be found in a style sheet, so like is caused by a JavaScript assignment.
As documented on MDN, Firefox 13 expanded the possible values for the background-position properties. Not sure whether this is creating the issues you see in Firefox later than Fx12.
When I test Firefox's ability to understand the left and top position syntax, it seems to work. Here's what I mean. Load your page, then open Firefox's Web Console (Ctrl+Shift+k). Paste this script next to the caret (>) and press Enter to execute it.
var pieces=document.querySelectorAll(".piece"), t="", l=""; for (var i=0; i<pieces.length; i++) {t=pieces[i].style.top || "0"; l=pieces[i].style.left || "0"; pieces[i].style.backgroundPosition = " -"+l+" -"+t;}
It works for me and I will assume it works for you.
Based on that, I think there must be something problematic in the values your script is assigning to backgroundPosition. However, the minification is impenetrable to me, so I can't tell from your script what values it is trying to assign. I'll have to leave the further investigation to you, but make sure to check one standard Firefox issue: include a unit of measurement (i.e., px) to avoid ambiguity (i.e., possibly invalid percentage value).
Hope this helps.
Hi jscher2000,
Thanks for all of the analysis - I see your point. Funny Firebug didn't show me any errors?
I will go back into the specs to try and understand why my jQuery code is not working. By the way I think this is the relevant snippet:
function setPiece(cnt, src, xPos, yPos){
var strPos = +xPos+' '+yPos;
if(UserCtrls.getLayer()==TAKE_OFF){
$pieces.eq(cnt).css({
'backgroundImage':'url('+src+')',
'top':Math.abs(yPos),
'left':Math.abs(xPos),
'position' : 'absolute',
'height' : UserCtrls.getSize()+'px',
'width' : UserCtrls.getSize()+'px',
'backgroundSize':adjViewWidth,
'backgroundRepeat':'no-repeat no-repeat',
'backgroundPosition':strPos
});
}
It looks like I not adding 'px' to the background position. What are the chances it will be that simple. Thanks a lot for your suggestions.
TC
Chosen Solution
That makes sense. If Math.abs(yPos) works, then yPos can't be a string and therefore can't contain units.
Hi jscher2000,
Yup that was the answer! Just needed to add px to each.
Thanks Much.
TC