The CSS method will not function properly on Safari when targeting the specific ID

that.displayIcon = that.scrollPosition / that.headerHeight
$('#icon').css({'opacity':that.displayIcon})
that.rotateIcon = Math.min(1,that.scrollPosition/that.headerHeight)       
$('#icon').css({'transform':'rotate('+that.rotateIcon*180+'deg)'})

Original CSS class: 

.icon{
  position: fixed;
  right: 25px;
  color: white;
  top:20px;
  visibility: visible;
  opacity: 0;
  font-size: x-large;
}

The code above (only part of it) is causing issues on Safari, while working perfectly fine on Chrome. Does anyone have any idea what might be causing this discrepancy?

This function on our website rotates an icon as the user scrolls down the page. I use percentages to adjust the opacity and rotation degree of the icon dynamically. However, it seems like Safari is not able to handle this inline CSS manipulation properly, whereas Chrome has no issues at all. It's quite confusing.

Note: I have defined the element like this: i#icon.fa.fa-chevron-circle-up(class='icon') where 'icon' serves as both an id and a class name. Initially, it follows the .icon{} class styling, but then I use #icon to add inline css to override the original styles.

javascriptjqueryhtmlcsssafari

Answer №1

Consider replacing # with . in your code

.icon{
  position: fixed;
  right: 25px;
  color: white;
  top:20px;
  visibility: visible;
  opacity: 0;
  font-size: x-large;
}

Make sure to clarify whether icon is an 'id' attribute or a 'class' attribute in your HTML element when using $("#icon") in your code.

Answer №2

One issue we encounter is that Safari may fail to update the page layout after CSS changes, necessitating a manual refresh. Here's a simple workaround:

that.iconDisplayPercent = that.scrollPosition / that.headerHeight;
$('#icon').css({'opacity': that.iconDisplayPercent});
that.iconRotatePercent = Math.min(1, that.iconDisplayPercent);      
$('#icon').css({'transform': 'rotate(' + that.iconRotatePercent * 180 + 'deg)'});
$('body').addClass('someClass').removeClass('someClass');

I hope this solution proves useful!

Answer №3

Depending on the version of Safari you are using, it may require a prefix for the 'transform' property. If you are used to working with automatic prefixing plugins, be aware that when adding inline code like this, prefixes might not be included unless you add them manually.

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

Combine two collections into a single collection in MongoDB using JavaScript

I have been attempting to merge two collections into a new collection while inserting the resulting data into the new collection. Here is the code I am using for the merge: db.users.aggregate( [{ $lookup: { from: "posts", localField: "_ ...

javascriptmongodbaggregate-functions

populate 3 input fields using the dropdown menu with the help of AJAX

Hello, I am new to PHP and Ajax. I have a select box where users can choose an option, upon which information should automatically fill in four text boxes. Someone recommended using jQuery my initial code. Here is my PHP code: if(isset($_GET['userna ...

phpjqueryajax

Exploitable Weakness Found in NestJS Version 8.4.5

After running npm audit on my npm package recently, I encountered an error that is related to the dicer package, widely used by NestJS. I have looked for solutions online but haven't been able to find any fixes so far. Has anyone else managed to reso ...

javascriptnode.jsnpmnestjs

What is the best way to display the user login in the center of a page with all necessary controls

Challenge How can the user login be displayed in the center of the page? Additional Information The current layout displays user login data on the left-hand side. I am looking to have the user login data centralized on the page, which includes labels f ...

csshtmlasp.net-mvc-4bootstrap-4bootstrap-ui

I am having trouble with node.js express not recognizing the path to my CSS files

My objective is to load information onto an HTML page using Node.js and Express. The issue I am facing is that when I try to open the main page (which displays all the books from the database), everything works smoothly - the CSS and JS files are located ...

javascriptcssnode.jsexpresshttp

Guide: "Adding markers to user-uploaded images - A step-by-step tutorial"

I'm struggling to create a website that allows users to upload images and use specific tools. However, I am facing an issue where the marker I want to add is appearing all over the webpage instead of just on the image itself. How can I confine it to o ...

javascriptjqueryhtmlcss

What is the best way for ensuring that the test only proceeds after useEffect's update function has been executed?

function CustomApp() { let [counter, setCounter] = useState(0); useEffect(() => { setCounter(1); }, []); //<-------------------------set a checkpoint here to debug, triggered only once return counter; } // trouble-shooting ...

javascriptreactjsjestjs

No input values were received using the $_GET method in

I've been searching for a solution to my problem, but haven't had any luck. Main JavaScript Code: $.ajax ({ method: "POST", url:"main_d.php", data: {type : 4} }) .done(function(msg_info) { $('#info_id').append(msg_info ...

phpjquery

Can you define the "tab location" in an HTML document using React?

Consider this component I have: https://i.stack.imgur.com/rAeHZ.png React.createClass({ getInitialState: function() { return {pg: 0}; }, nextPage: function(){ this.setState({ pg: this.state.pg+1} ) }, rend ...

javascriptjqueryhtmlreactjs

Swapping the identifiers in the array with the corresponding names from the second array

I am facing an issue with linking two arrays containing objects based on their id and then replacing that id with the corresponding NAME from a second array. For instance, consider the following arrays: array1 = [ {id: [1, 2], info: "xxx"}, {id: [2, 3 ...

javascriptarraysangularobjectecmascript-6

Is there a way to trigger an animation to play in reverse without using a selector and then have it play normally on the :active state?

Trying to achieve the same animation effect using different selectors has been a bit challenging for me. Specifically, when I attempt to utilize the animation without a selector and then with the selector :active, the browser only plays the animation once ...

htmlcsscss-animations

Send data to a webpage and navigate to another webpage using PHP

I am attempting to utilize POST variables in combination with AJAX to send them to a page named results.php: $.ajax({ type: "POST", url: "results.php", data:"score="+score+"&round="+round, success: function(data) { window.locatio ...

phpjqueryajax

When a user clicks a button, modify a section of the URL and navigate to

I've been searching everywhere for a solution to this issue, but I just can't seem to find it. I'm hoping someone here can help me out. In a bilingual store, I need a way to redirect users to the same product on a different domain when they ...

javascriptphpjquery.htaccess

A guide on efficiently inserting multiple rows containing JSON data into a MySQL database simultaneously using node.js

I'm facing an issue with inserting multiple values into columns simultaneously. Let's say I have JSON data consisting of two rows of information, and I want to insert both rows into my table at one go. My attempt looks like this: var data = [&apo ...

javascriptmysqlsqlnode.jsdatabase

Issue with Tailwind CSS: The 'overflow-y' property does not scroll all the way to the bottom when using 'top-[63px]'

I'm facing an issue with my Tailwind CSS code that is hindering me from scrolling to the bottom of an aside element. <body> <div> <nav class=" bg-white px-2 py-2.5 dark:bg-gray-800 sm:px-4 fixed w-full z-20 border-b borde ...

htmlcsstailwind-css

How to customize field appearance in Django authentication login view by adding a CSS class

I recently started working with Django and came across Django forms when using the django.contrib.auth.views.login view for user authentication. However, I'm struggling to figure out how to add a CSS class to the username and password fields. The doc ...

cssdjangodjango-formsdjango-templates

Data will not bind with Laravel and Vue

I am currently working on a Laravel project and trying to develop a basic editing feature for posts. My approach involves using Vue.js 2 to bind the data, but unfortunately, I am facing issues with displaying it - I'm not quite sure what's causin ...

javascriptphplaravelvue.js

What is the best way to adjust the camera position in ThreeJS while taking into account perspective?

Question: Currently, I am developing a first-person maze game using Threejs. I recently integrated DeviceOrientationControls to transition the game towards VR. However, I have encountered an issue where my previous camera movement system, which used arrow ...

javascriptcamerathree.jsgoogle-cardboard

What is the best way to interact with my component in React?

As a newcomer to Reactjs, I have a question regarding my current setup: The components in my project include navComponent.js, stackComponent.js, and nav.js I am trying to pass data from stackComponent.js to navComponent.js so that the nav.js data can be ...

javascriptreactjs

Transferring a JavaScript variable to a PHP file through jQuery's Ajax functionality

I'm having trouble figuring out how to pass a JavaScript variable to a PHP script using AJAX. This is my first attempt at using AJAX and I seem to be missing something. Here's the code snippet: function selectCategory(value) { $.ajax({ ...

javascriptphpjqueryajax