Safari not updating Angular ng-style properly

I created a simple carousel using Angular and CSS animations which works well in Chrome. However, I recently tested it in Safari and noticed that the click and drag functionality does not work. I've been trying to fix this issue for days and could use some assistance.

Upon investigation, it seems that the $scope.getAnimatorStyles method is being called correctly, but the 

ng-style="getAnimatorStyles()"
is not updating the DOM as expected.

I've attempted various solutions without success:

  • Forcing a scope update by using $scope.$apply()
  • Watching $scope.animationDelay and applying styles directly to the DOM
  • Triggering a browser reflow by calling .offsetHeight
  • Updating $scope.animationDelay within $timeout

An interesting observation is that when I apply the styles to the document body, it functions properly, leading me to suspect that Angular might be causing some issues with the directive.

Here's the codepen link showcasing the slider: http://codepen.io/jabes/pen/KNpEbq

Any help or insights would be greatly appreciated.

Edit #1:

I made progress by forcing a reflow - changing the display property on click and drag somewhat resolves the issue. However, this also resets the animation, rendering it ineffective. I've captured GIFs illustrating the improper rendering in the browser.

Check out the Chrome recording () showing how the animator element moves with the cards and updates position based on delay changes.

Compare it with the Safari recording (), where the animator remains static while the cards animate, and only responds to delay changes without affecting card positions.

Edit #2:

Even after removing all Angular and JavaScript from the HTML/CSS, Safari still fails to update the animation position when changing the animation-delay in the element's style property.

Edit #3:

This issue appears to have no connection to Angular. I've posted about a related CSS animation bug in Safari: CSS Animation Delay Bug In Safari

javascriptcssangularjsanimationdom

Answer №1

One potential solution to consider is examining the style object generated by the getAnimatorStyles() function using a console.log. This could reveal any unexpected behavior occurring within the styling.

Additionally, you might want to try pasting the same style object directly into the template definition to see if it yields different results.

In moments of uncertainty, it's always wise to revisit the fundamentals and rule out any basic errors. Sometimes, the simplest issues can be overlooked when searching for more complex problems that may not even exist.

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

What is the process for adding a dot to the package.json file using the npm-pkg command?

I need help using the npm pkg set command to create a package.json file with the following structure: { ... "exports": { ".": { "import": "./dist/my-lib.js", "require": "./dist/my-l ...

javascriptnode.jsnpm

What is the step-by-step process for executing the following functions: 1. magnify -> 2. spin 360 degrees -> 3. restore to original size before magnification -> 4. switch colors on and

Can you show me a demo featuring the following functions in order: 1. enlarge -> 2. rotate 360 degrees -> 3. resize to original size -> 4. change color (toggle) $(document).ready(function() { $('.tlist td div').click(function() { ...

javascriptjquerycssjquery-uijquery-animate

Set dimensions for the input submit border inside

Can anyone help me figure out how to prevent the border from being drawn inside of my submit button element? I have a specific width and height set for cross-browser consistency, but in Firefox 15 and IE7 the border gets applied to the inside of the elemen ...

htmlcsscross-browser

Looking to optimize the JavaScript code for improved performance speed

Is there a more efficient way to avoid writing the same lines of code repeatedly without compromising performance? I've attempted using a for loop to categorize fields as 'mandatory' or 'optional', but it still requires duplicating ...

javascriptarraysangularjs

Unique option preservation on customized HTML select menus - Maintain original selection

Currently, I am attempting to replicate a custom HTML select based on the example provided by W3 Schools. You can view the demo through this link: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_custom_select The issue I am encountering is that ...

javascripthtmlselect

Problem with styling a CSS table

I am having an issue with the table style. My goal is to set the table radius to 8px, but my code doesn't seem to be working. Can someone assist me with this? Thank you! //ps I also require border-collapse in my code. Here is the link to my jsfidd ...

htmlcss

retrieve the JSON object corresponding to the specific category

Here is an example of a JSON: [ { "id":1, "name": "BMW E46 PANDEM", "price": 130000, "currency":"USD", "color":"white", "category":"car" }, { "id":2, "name": "Yamaha", "price": 2000, "currency":"USD", "c ...

angularjsjson

Setting up TypeScript in an Angular 2 project and integrating Facebook login

Currently, I am in the process of familiarizing myself with Angular 2 and typescript. Although things have been going smoothly so far, I have hit a roadblock while attempting to implement a Facebook login message. In my search for a solution, I stumbled up ...

javascriptangularjstypescript

Adding text to a Video Js fullscreen window on an iPad

Looking to enhance user experience on iPad while using a video js player, I want to make an image pop up upon completion of the video. Currently, I have it set up to work without full screen mode, but iPad users prefer watching videos in full screen. Is th ...

jquerycsshtmlhtml5-video

What causes the entire set of dynamically created cards to collapse when using the toggle collapse button in ngb-bootstrap's Collapse control?

I am currently implementing the ngb-bootstrap collapse feature in my Angular 9 application. Incorporating the ngb-bootstrap collapse functionality within a Bootstrap card, I have multiple cards being generated. Each card is equipped with a collapse button ...

htmlcssangulartwitter-bootstrapng-bootstrap

Tips on how to efficiently update or insert an object within an array in Vue JS 2

My current item list is displayed below. I am looking to add new items to the list, but if the ID matches an existing entry, I want to update the value of that object. For example: segmentValues: [ { id:1, value:'Foo' }, ...

javascriptarraysvue.jsvuejs2

Leveraging async/await within a React functional component

Just getting started with React for a new project and facing challenges incorporating async/await functionality into one of my components. I've created an asynchronous function called fetchKey to retrieve an access key from an API served via AWS API ...

javascriptreactjsasync-awaitmaterial-uireact-functional-component

Limit the length of text using jQuery by specifying the maximum pixel width

Trying to utilize jQuery for a quick function that calculates the pixel width of a string on an HTML page and then shortens the string until it reaches a desired pixel width... Unfortunately, I'm encountering issues with this process as the text is n ...

javascriptjquery

Why is the lifecycle callback not being triggered?

I am currently learning how to develop with Vue.js. I have been trying to use the lifecycle callbacks in my code. In my App.vue file, I have implemented the onMounted callback. However, when I run the code, I do not see the message appearing in the consol ...

javascripttypescriptvue.js

Retrieve JavaScript functions as JSON or text in AngularJS and execute them

Currently, I am working on developing an AngularJS application and have come across a particular challenge that needs to be addressed: After making a web service call, I receive JavaScript code that looks like this: { "script":"function foo(a, b) { c = ...

javascriptjsonangularjsfunctioneval

Tips for effectively utilizing v-model and v-select in a dynamic manner

Is it possible to have a group of select elements in Vue.js that work independently with v-model without needing separate data properties for each one? For example, select 1 and select 2 should be treated as one group, while select 3 and select 4 are anot ...

javascriptvue.jsvue-componentv-modelv-select

How to target only the parent div that was clicked using jQuery, excluding any

I have attempted to solve this issue multiple times, trying everything I could find on Google and stack overflow without success. At times I am getting the span element and other times the div - what could be causing this inconsistency? $(".bind-key"). ...

javascripthtmljquery

angular-translate - Fallback language for determining the preferred language

I am utilizing angular-translate in my application. How do I set up a fallback language in case the determinePreferredLanguage() function returns a language key that is not recognized by my code? I would like to default to English if a user from Sweden, f ...

angularjsangular-translate

The use of async components in Vue.js with named imports

I understand how to dynamically load components asynchronously in Vue. For example, instead of importing MyComponent directly: import MyComponent from '@/components/MyComponent' export default { components: { MyComponent } } We can use ...

javascriptvue.jswebpack

Guide on generating a fresh array of objects that encompass distinct items, alongside their combined prices and quantities using JavaScript

I am struggling to generate a new array of objects from one that contains duplicates. For instance, here is the console.log output of the current array: console.log(items); [{ _id: 5eb2f7efb5b8fa62bcd7db94, workName: 'best item ever', ...

javascriptarraysmongodbexpressobject