Safari: Fixed-positioned DIVs staying put after DOM updates

Question

Safari: Fixed-positioned DIVs staying put after DOM updates

Hey there!

I've been experimenting with animating absolutely positioned DIVs on my webpage using some JavaScript to update the top and left CSS properties. It's been working smoothly in Chrome, Firefox, and even Internet Explorer 8. However, I encountered a strange issue when testing it in Safari 5 - the DIVs just remain static. Oddly enough, if I resize the Safari window, they suddenly start moving...

If you're curious, you can check out a demo of what I'm talking about here:

The code used to update the DIVs is quite simple, just a snippet of jQuery (which also handles rotation perfectly fine in Safari):

$(this.elem).css({
 '-webkit-transform': 'rotate(' + (( this.angle * (180 / Math.PI) ) * -1) +'deg)',
 '-moz-transform': 'rotate(' + (( this.angle * (180 / Math.PI) ) * -1) +'deg)',
 'transform': 'rotate(' + (( this.angle * (180 / Math.PI) ) * -1) +'deg)',
 'left': Math.round(this.xPos) + 'px',
 'top': Math.round(this.yPos) + 'px'
});

I tried adding position:relative to the body, as well as including 'px' and rounding down the values in case Safari was finicky about long floating point numbers. Sadly, no luck - the DIVs stubbornly refuse to budge until the window gets resized...

If you have any insights or suggestions, they would be greatly appreciated!

Thanks for reading, Chris.

javascript jquery css dom safari

Answer 1

Answer №1

To fix the issue in Safari 5, replace the top and left properties with the translate sub-property of the transform CSS property.

When using setInterval, avoid using string arguments.

Demo: http://jsbin.com/okovov/2/

Bird.prototype.draw = function() {
    var transform = 'rotate(' + (( this.angle * (180 / Math.PI) ) * -1) +'deg)' +
                    ' translate('+ this.xPos + 'px,' + this.yPos + 'px)';
    $(this.elem).css({
          '-webkit-transform': transform,
          '-moz-transform': transform,
          'transform': transform
    });
};
// ...
var timer1 = setInterval(function(){bird1.animate();}, 50);
var timer2 = setInterval(function(){bird2.animate();}, 50);
var timer3 = setInterval(function(){bird3.animate();}, 50);

A smaller delay than 50 milliseconds could improve animation performance. Consider optimizing your functions by replacing jQuery methods with vanilla JavaScript:

Bird.prototype.draw = function() {
    this.elem.style.cssText = ['-webkit-', '-moz-', '', ''].join(
        'transform:rotate(' + (( this.angle * (180 / Math.PI) ) * -1) +'deg)' +
        ' translate(' + this.xPos + 'px,' + this.yPos + 'px);'
    ); // Result: -webkit-transform: ...;-moz-transform:...;transform:...;
};

Answer 2

To fix the issue in Safari 5, replace the top and left properties with the translate sub-property of the transform CSS property.

When using setInterval, avoid using string arguments.

Demo: http://jsbin.com/okovov/2/

Bird.prototype.draw = function() {
    var transform = 'rotate(' + (( this.angle * (180 / Math.PI) ) * -1) +'deg)' +
                    ' translate('+ this.xPos + 'px,' + this.yPos + 'px)';
    $(this.elem).css({
          '-webkit-transform': transform,
          '-moz-transform': transform,
          'transform': transform
    });
};
// ...
var timer1 = setInterval(function(){bird1.animate();}, 50);
var timer2 = setInterval(function(){bird2.animate();}, 50);
var timer3 = setInterval(function(){bird3.animate();}, 50);

A smaller delay than 50 milliseconds could improve animation performance. Consider optimizing your functions by replacing jQuery methods with vanilla JavaScript:

Bird.prototype.draw = function() {
    this.elem.style.cssText = ['-webkit-', '-moz-', '', ''].join(
        'transform:rotate(' + (( this.angle * (180 / Math.PI) ) * -1) +'deg)' +
        ' translate(' + this.xPos + 'px,' + this.yPos + 'px);'
    ); // Result: -webkit-transform: ...;-moz-transform:...;transform:...;
};

Answer 3

Answer №2

This solution may not fit your exact needs, but you might consider utilizing jQuery's .offset() to adjust their position instead of manually modifying their CSS properties. Your implementation would resemble the following:

$(this.elem).css({
 '-webkit-transform': 'rotate(' + (( this.angle * (180 / Math.PI) ) * -1) +'deg)',
 '-moz-transform': 'rotate(' + (( this.angle * (180 / Math.PI) ) * -1) +'deg)',
 'transform': 'rotate(' + (( this.angle * (180 / Math.PI) ) * -1) +'deg)'
})
.offset({
 top: Math.round(this.yPos),
 left: Math.round(this.xPos)
});

I trust this guidance proves helpful!

Sidenote: if you wish to establish the relative position, leverage jQuery's .position().

Answer 4

This solution may not fit your exact needs, but you might consider utilizing jQuery's .offset() to adjust their position instead of manually modifying their CSS properties. Your implementation would resemble the following:

$(this.elem).css({
 '-webkit-transform': 'rotate(' + (( this.angle * (180 / Math.PI) ) * -1) +'deg)',
 '-moz-transform': 'rotate(' + (( this.angle * (180 / Math.PI) ) * -1) +'deg)',
 'transform': 'rotate(' + (( this.angle * (180 / Math.PI) ) * -1) +'deg)'
})
.offset({
 top: Math.round(this.yPos),
 left: Math.round(this.xPos)
});

I trust this guidance proves helpful!

Sidenote: if you wish to establish the relative position, leverage jQuery's .position().

Safari: Fixed-positioned DIVs staying put after DOM updates

Answer №1

Demo: http://jsbin.com/okovov/2/

Answer №2

Similar questions

What is the best way to transfer data from a custom method and use it in another method within my constructor function in Javascript?

Unable to utilize a custom function within JQuery

An unforeseen issue arose while trying to update the data in a Chart.js chart within a Vue application

Retrieve the latest entry from a JSON file containing epoch timestamps

What are the best practices for incorporating jQuery animations in Angular directives?

Why does the Material button style take time to apply when my Angular application first loads instead of being immediate?

Iterate over Observable data, add to an array, and showcase all outcomes from the array in typescript

Prevent any future dates from being entered

Harness the power of React ref to serve as a selector for jQuery plugins

Getting started with TinyMCE in Nuxt: A step-by-step guide

Need help inserting an image into the div when the ngif condition is true, and when the ngif condition is false

Issue with pushing inner list<object> in Knockout version 3.2.0

I attempted to make changes to a Firebase document using the update() function, however, the document did not reflect

How come my ejs files are all affected by the same stylesheet?

Tips for checking the type radio button input with Angular.js

What is the best method to retrieve checked checkbox values and the selected dropdown value using AngularJS?

Checking JSON formatted actions in Rails 4: A guide to testing

What is the best way to enable the delete function exclusively for users who are logged in?

Mysterious line break emerges upon displaying JavaScript through PHP

JQuery Ajax Long Polling - "the poll function will only be triggered once the ajax request has finished and at least thirty (30) seconds have elapsed"