Discovering the background-position and background-image properties for multiple backgrounds with jQuery on Safari

It seems like there might be something I'm overlooking.

I am attempting to retrieve the current background information for an element (div) that has multiple backgrounds set using the longhand properties background-repeat, background-position, and background-image.

Using jQuery, I have tried 

var bPos = $('#element').css('background-position')
to see the current positions, which should give me something like '0 0, 100px 100px, left bottom' in Firefox and Chromium. However, Safari (version 5 on OS-X) only returns the first value pair ('0 0'). These CSS values are defined in a separate stylesheet.

Any thoughts on why this discrepancy exists? Is there a way to obtain the full set of value pairs in Safari (even using the shorthand background property does not work)?

Edit:

Below is the CSS code from the external stylesheet used:

#page{
    background-repeat: repeat-x, repeat-x, repeat-x, repeat-x, repeat-x;
    background-image: url('../images/line.png'), url('../images/line.png'), url('../images/line.png'), url('../images/line.png'), url('../images/line.png');
    background-position: 0 798px, 0 653px, 0 125px, 0 88px, 0 78px;
}

Edit:

I have created a test scenario for this issue on jsFiddle and have filed it as a jQuery bug report since it seems to be reproducible behavior. Although it could potentially be a browser implementation issue rather than strictly a jQuery bug.

Any suggestions are welcome...

Edit:

The jQuery bug report has been closed - indicating it may be a Safari bug. Unsure how to proceed further, but I have submitted a bug report to Apple.

Edit:

According to Sindre Sorhus, this issue appears to have been resolved in Safari 5.1.

jquerycsssafari

Answer №1

With the issue now resolved in version 5.1, it seems like a non-issue at this point. However, I can't help but wonder if a workaround could involve setting the background initially from JavaScript using

$('#page').attr('style', '...');

and then retrieving it from there... seems kind of cumbersome and annoying, doesn't it?

Answer №2

Implement the Jquery Background Position plugin for dynamic background movements.

Answer №3

Experimenting with various classes might simplify the process.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unraveling the serialized form data sent via ajax/Jquery and stored in $_POST variables

I am encountering an issue with submitting a form using AJAX and JQuery. serializedData = $form.serialize(); request = $.ajax({ url: "processData.php", type: "post", data: serializedData }); The problem I am facing is that the text becomes ...

phpjqueryajaxpostcharacter-encoding

jQuery: automatic submission on pressing enter compared to the browser's autocomplete feature

Here is a JavaScript code snippet that automatically submits the form when the user presses the "enter" key: jQuery.fn.installDefaultButton = function() { $('form input, form select').live('keypress', function(e) { if ((e.which && ...

javascriptjquerybrowserautocompletesubmit

The idea behind this jQuery and CSS 3 animation is to create a dynamic visual of moving along a road that disappears into the

At the outset, let's clarify that I am seeking a conceptual solution or approach rather than actual working code. The Issue at Hand I have been tasked with exploring a navigation concept for a timeline wherein you would walk down a road towards the ...

jquerycssanimation3d

Is there a way to incorporate an Ajax response value into a timer function?

I am trying to create a countdown timer that retrieves its value from an Ajax call. Here is the code I have so far: function timer(seconds) { var days = Math.floor(seconds/24/60/60); var hoursLeft = Math.floor((seconds) - (days*86400)); ...

javascriptjqueryajaxtimer

Attempting to change the primary color in Bootstrap is ineffective following a button click

I have been attempting to customize the primary color of Bootstrap 5 using SCSS. Everything works perfectly until I click a button that opens an external link. Below is the content of my SCSS file: $primary: #ae217aff; @import "../node_modules/boots ...

javascripthtmlcsssassbootstrap-5

Promise refused due to non-error caution

Error: h1.js:25 Warning: a promise encountered an issue with a non-error: [object String] I am unsure of the root cause of this error and would greatly appreciate any assistance in understanding it. I am currently learning about Promises and AJAX, so any ...

javascriptjqueryajaxpromisedeferred

What is the process to position an image as a background behind my navigation links?

I'm struggling to position an image behind my navigation bar in the top right corner of the page, and I'm having difficulty achieving this. Here's the desired appearance: This is the current HTML structure: <div class="navbarcn"> & ...

htmlcss

ensure that the radio button is selected on the contact form 7

I'm looking to customize the appearance of my radio buttons within a WP plugin ContactForm7. I found some CSS code on this website: Source CSS code My goal is to change the color of the radio button to green when it's clicked or checked: .wpcf7 ...

csswordpressradio-button

Tips for ensuring that content doesn't shift down when clicking a drop-down menu

I currently have three dropdowns that function as an accordion. When I click on one dropdown, the rest of the content below shifts down, which is not the behavior I want. Is there a way to prevent the content below each dropdown from moving when a dropdow ...

jqueryhtmlcss

The Jquery Datatable fails to display the accurate number of rows based on the selections made in the dropdown

I am working on an ajax call that returns a table. In the success method, I am using $("#tableID").dataTable();. Although it shows paging and the number of rows in the dropdown, it is displaying all rows instead of only the number of rows selected in the d ...

javascriptjqueryajaxdatatables

Managing AJAX Errors in PHPAJAX error handling tips for developers

My current code is only set up to display a general error message when an error occurs during execution. I want to improve it by returning specific error messages for different scenarios. However, I have not been able to find satisfactory solutions in my s ...

javascriptphpjqueryjsonajax

Different techniques for using percentages in CSS transformations to create dynamic animations for DOM element translations

I have 14 objects positioned across the dom that I need to animate using the translate property. Currently, I am using transform: translate(x%, y%) for each object, requiring me to calculate the translation amount and apply a CSS style individually. This m ...

javascripthtmlcss

When using .animate() to set the position, it takes precedence over manually assigning

I'm facing an issue with constantly scrolling objects on the screen, each assigned a number. When you press one of their numbers, it should move far left off the screen and then scroll back on. However, when I try to reassign the position of the eleme ...

javascriptjquerycssanimation

Changing the color of an element on click using jQuery's .css() method,

There is a table and I am using fadeToggle on the list to hide and show the table. The background of the list is green color, but I want to change the list color when hiding the table and revert it back to green when clicking to show the table. Unfortunate ...

jquerycss

Determine whether the session has expired by making an AJAX request

While there have been similar questions on stackoverflow, none have provided a satisfactory answer to this particular issue :) I am looking for a solution that will allow me to display a login prompt when a user leaves their computer idle for 20 minutes c ...

jqueryajaxsession

Transmit an Array using Ajax and retrieve it on an ASP Classic page

I am facing a challenge where I need to pass an array using AJAX on an ASP page. After trying to send it as GET method and checking the data being received, I noticed that only the LAST record of the array is being processed by ASP. How can I successfu ...

javascriptjqueryarraysajaxasp-classic

Why has my dropdown menu decided to go horizontal, rather than dropping down as it should?

Hi there! I'm new to css and tried following a tutorial with some tweaks. However, when adding a drop down menu using lists, it ended up going sideways instead of downward. Can anyone help me out? I also would like to have a collapsible menu implemen ...

htmlcssdrop-down-menu

Issue with Safari: Unable to trigger CSS :hover when tapping SVG element

On an iOS device in Safari, tapping this SVG element does not trigger the transition animation to fade in the replacement <g id="training-sub-menu">. The animation is confirmed to work, as there is a strange behavior where long-pressing whe ...

htmlcssiossvgsafari

Listing items in a table using ng-repeat

I'm currently working on constructing a table using ng-repeat, but I also need to incorporate a toolbar. The table design I have in mind is similar to the one shown in the image below, however, I require additional rows to be inserted under the sectio ...

htmlcssangularjsangularjs-ng-repeattabular

Header appearing at the same level as post title due to overlapping

After rearranging the date header below my post title on Blogger, I encountered an issue where on the latest post, the date was overlapping with the header. Adjusting the margin or padding affected other date headers, leaving me unsure of what to do next. ...

htmlcssdatetemplatesblogger