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

Using Typescript, Angular, and Rxjs to retrieve multiple HttpClients

How to create a dropdown menu in React js with an array of items

Utilizing PHP to dynamically load HTML forms and leveraging JQuery for form submissions

In Redux, it is possible to add characters to an array but for some reason the remove action does not successfully reach the reducer

How to Deactivate Horizontal Scrolling Using CSS in WordPress

Injecting HTML into Vue component

Is it impossible to access the length property of an undefined variable?

"JavaScript's versatility shines through with its ability to handle multiple variables

The functionality of Material UI tooltip is not functioning properly when accessed on mobile devices

Stopping repeated content with endless scrolling ajax spinner

Steps to customize Button Color and Label in a specific cell within a Material UI Table

What is the best way to have child controllers load sequentially within ng-repeat?

Can JavaScript trigger an alert based on a CSS value?

Launching a jquery dialog from a sibling anchor element without relying on selectors based on IDs

The jQuery AJAX autocomplete result box is either too cramped or displaying numbers

What is the best way to target all the 'tr' elements within a 'table' using angularJS?

Error encountered in Vue3: An uncaught TypeError occurred when attempting to "set" a property called 'NewTodo' on a proxy object, as the trap function returned a falsish

When an element is set to a fixed position while scrolling, it causes the element to flicker

Explain how the 'next' function works within Express middleware and its role in directing the flow to a different function

Why do I keep receiving the error message "Cannot set property of undefined"?