Safari on Mac OS is experiencing issues with disappearing arrows

I am currently working on a WordPress website that utilizes the fullpage.js plugin (https://wordpress.org/plugins/wp-fullpage/).

Encountering an issue with the fullpage's arrows (left and right) specifically on Safari on Mac OS: they appear and disappear unexpectedly. These arrows are generated using CSS's ::before and ::after pseudo-elements. After some research, it seems that compatibility of ::before and ::after with Safari can be problematic.

Has anyone faced this issue before and found a solution?

javascriptcsswordpressfullpage.js

Answer №1

Your current version of fullPage.js is outdated (2.4.3), which is 22 versions behind!

We recommend updating to the latest version (2.6.5).

If you are unable to update due to limitations with the WordPress plugin, you can simply add the following CSS code to your stylesheet:

.fp-controlArrow {
    -webkit-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

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

Ensure you have the right zoom in and out percentages to properly test how your website responds on various browsers across different

Currently, I am using Google Chrome to test the responsiveness of a web application that I am developing. As of today, my browser versions are as follows: Google Chrome - Version 88.0.4324.96 (Official Build) (64-bit) Mozilla Firefox - Version 84.0.2 (64- ...

htmlcssresponsiveresponsiveness

Create a line connecting two divs using jQuery's DOM manipulation capabilities

Looking to connect two divs with a straight line, I stumbled upon jQuery DOM line, which appears to offer a more streamlined solution compared to jsPlump. I attempted to incorporate it into my code, but unfortunately, it's not working as expected. Be ...

javascriptjquerydom

Debouncing in AngularJS with $watch

In my code, I have an HTML search field represented by the following: <input ng-model-options="{ debounce: 500 }" type="text" ng-model="name"> Along with the JavaScript snippet: $scope.$watch('name', function(newVal, oldVal) { ...

javascriptangularjswatch

The confusion surrounding navigation in Angular's single-page applications

I'm struggling to grasp how Angular handles routing in my single-page application. Here's my issue: When I type in the url: localhost:3000/streams/ I expect the 'streams' page to load. My understanding was this: My express serve ...

javascriptangularjsexpresssingle-page-application

ThreeJS | The object's position cannot be cloned as it seems to be undefined, however, this is unexpected

My code problem is not as complex as it seems. The issue lies within the section marked by the "ERROR APPEARS HERE" comments. The error message I am encountering reads: Uncaught TypeError: Cannot read property 'position' of undefined This er ...

javascriptjquerythree.js

What is the process for changing the preserveDrawingBuffer setting in three.js?

Essentially, I am looking to set up a scenario where I can set preserveDrawingBuffer=true, render the scene once, capture the screenshot, and then revert back. However, this presents two challenges: there is no function in the renderer to dispose of all ...

javascriptthree.js

Bootstrap - Utilizing a boxed grid within a div located in the .fluid-container

Can you please review these two images? I'm trying to place ".myDivInTheGrid" inside a boxed bootstrap div. Any ideas on how to do this? This is what I currently have... <div class="fluid-container"> <div class="col-md-6"></d ...

htmlcsstwitter-bootstrap-3

The property 'push' cannot be read because it is undefined

$scope.AddTask = function () { $scope.tasks.push([{ "taskName": $scope.taskName, "priority": $scope.selectedP }]); }; $scope.tasks = [{ "taskId": 1, "taskName": "task 1", "priority": 1 }, { "taskId": 2, "taskName ...

javascriptangularjs

Attempting to utilize a mongo connection multiple times will result in an error message stating "Unable to use a session that

I'm encountering an obstacle while working with Mongo, here's the situation: const mongoose = require('mongoose'); const CONFIG = { host: "localhost", port: 27017, db: "dev" }; const url = `mongodb://${ ...

javascriptnode.jsmongodbmongoose

Applying classes dynamically to a custom form component in Angular to tailor its appearance

I am currently working on a custom form component where I need to dynamically apply classes to it. import { Component, forwardRef, Injector } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms&apos ...

cssangular

The URL in React Router updates as expected, but when attempting to render a component using a button component link

I have encountered a situation similar to the one portrayed in this CodeSandBox example, where I am required to implement react routing within two distinct components. The issue that is perplexing me is that, when I navigate down to either the Profile or ...

javascriptreactjsreact-routermaterial-ui

Looking for assistance in making an animation clickable as well

Hey there, I'm no expert in HTML and CSS, but I can make some changes to existing code. However, when it comes to writing code from scratch, I struggle. I need help turning this block of code into a clickable link. Can someone guide me on how to achie ...

htmlcsshyperlink

The error message "Cannot construct apickli.Apickli" is indicating a Type Error

Encountering this issue : TypeError: apickli.Apickli is not a constructor every time I attempt to execute Sendpostrequest.js again in the following step of a scenario. In A.js, the initial call to Sendpostrequest works without any problems. However, ...

javascriptnode.js

Utilize Google Console with Chrome and jQuery to extract the name and URL from HTML content

I am trying to parse the HTML source code in order to extract all links and text from it, and then store this information in a multidimensional array, all within the Google Chrome console. Here's a snippet of the code that needs to be repeated 10 tim ...

javascripthtml

Having trouble grasping ES6 concepts with Reactjs?

I am completely new to reactjs and recently followed a tutorial (link: https://www.youtube.com/watch?v=Ke90Tje7VS0). Currently, I am using Windows and following the commands in cmd as instructed in the tutorial: npm i -g <a href="/cdn-cgi/l/email-prote ...

javascriptnode.jsreactjscreate-react-app

Customize dynamically loaded data via AJAX

I have a webpage that is loading a table from another source. The CSS is working fine, but I am facing an issue editing the table using jQuery when it's loaded dynamically through a script. It seems like my changes are not getting applied because they ...

javascriptjqueryhtmlajax

Having trouble getting the map function to work in ReactJs while using Next.js?

Hey there, I am diving into ReactJS with the "Nextjs" framework and working on fetching data using async functions. However, I am facing an issue where I am unable to fetch data using the map function. The console.log is displaying a message saying "item ...

javascriptreactjsnext.js

Iterate through the URL parameters and store them in the database

I need to efficiently loop through all my post requests and aggregate them collectively. What is the most effective approach for achieving this? Below is the Form structure along with the data I receive: var Form = new Schema({ title: { type: ...

javascriptnode.jsexpressurlmongoose

Change the button text back to default after the dialog is closed

I have implemented copy into clipboard functionality using the following code: function copyToClipboard(e, btn) { e.preventDefault(); // prevent submit var str = document.getElementById("forms-subscribe-email"); str.select(); document.execComm ...

javascripthtmlbootstrap-4bootstrap-modal

The Bootstrap carousel's transition effect is not functioning as expected

The fade transition I added to my Bootstrap 4 carousel isn't working properly. It seems like the effect is not being applied to the carousel. Here is the HTML code snippet: <div id="testimonialsSlides" class="carousel carousel-fade" data-ride="fa ...

csstwitter-bootstrapcarouselbootstrap-4