The Safari 7.1+ browser seems to be having trouble with the spotlight effect

Why is the CodePen not functioning properly in Safari? Despite working well in Chrome and Firefox, it completely fails to work in Safari 7.1+. Can anyone provide some insights?

http://codepen.io/cchambers/pen/Dyldj

$(document).on("mousemove", function(e){  
  $(".spotlight").css("left",e.clientX-100).css("top", e.clientY-100);
});
body{
    margin:0;
    background:url(http://i.imgur.com/KHucaTQ.jpg);
    background-size:100% auto;
    overflow:hidden;
} 
.spotlight{
    cursor:none;
    position:absolute;
    top:100px; 
    left:200px;
    height:200px;
    width:200px;
    border-radius:50%;
    background:transparent;
    box-shadow:0 0 0 2000px rgba(0,0,0,.85);
}

.ha{
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="spotlight ha"></div>

javascriptjqueryhtmlcsssafari

Answer №1

Revise your css code like so:

.highlight{
  cursor:none;
  position:absolute;
  top:100px; left:200px;
  height:200px;
  width:200px;
  border-radius:50%;
  background:transparent;
  box-shadow:0 0 0 2000px rgba(0,0,0,.85);
  -webkit-box-shadow:0 0 0 2000px rgba(0,0,0,.85);
}

By adding -webkit-, the issue should be resolved.

If needed, consider updating Safari to ensure you are using the latest version.

Learn more about box-shadow and its compatibility across browsers: box-shadow - MDN Docs

Answer №2

After some troubleshooting, I discovered that the key to resolving the issue was adjusting the "spread" parameter in the box-shadow CSS property from 2000px to 1900px. The reason behind this change remains unclear to me, but it did effectively solve the problem on my Safari browser version. Next step is to test it on version 8 and other browsers to ensure consistent functionality.

I'm sharing the code snippet here in case it proves helpful to anyone:

.spotlight{
  cursor:none;
  position:absolute;

  top:24%;
  left:7%;

  height:20%;
  width:17%;
  border-radius:50%;
  background:transparent;
  box-shadow:0 0 0 1900px rgba(0,0,0,.65);
  z-index: 2;

}

Answer №3

I made a simple oversight by forgetting to include the -webkit-border-radius in my CSS code. Such a silly mistake!

border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;

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

The phenomenon of an invisible Absolute or relative position leading to grid components overlapping in Next.js

I've been struggling with this issue for over 48 hours now. I've attempted to troubleshoot by commenting out everything except the affected components and even swapping entire components around, but the problem persists. Oddly enough, rearranging ...

javascriptcssnext.jssass

using javascript to dynamically color rows in a table based on the value in the status field

Hi, I'm new to javascript and seeking help for my table coloring issue. I have a dynamic table where data is inserted through an Ajax call. The goal is to color specific records based on their status. I attempted a solution but only one record gets c ...

javascriptjqueryhtmlcss

Is it time to release the BufferGeometry?

My scene objects are structured around a single root Object3D, with data loaded as a tree of Object3Ds branching from this root. Meshes are attached to the leaf Object3Ds using BufferGeometry/MeshPhongMaterial. To clear the existing tree structure, I use t ...

javascriptthree.jsbuffer-geometry

What is the correct method for redefining properties and functions in Vue.js?

Is there a proper method for overriding methods using mixins in Vue.js? While it's possible to mimic inheritance with mixins, what if you only want to extend certain props without completely replacing the entire prop value? For example, let's sa ...

javascriptvue.jsvuejs2

Implementation issue: jQuery autocomplete function is not triggering

I'm having trouble with the following code, as it seems that the autocomplete feature is not working properly. $(document).ready(function () { $('div.chapter a[href*="wikipedia"]').attr({ rel: 'external', title ...

jqueryajaxjquery-autocomplete

Ways to retrieve the chosen option from a dropdown menu within an AngularJS controller

I have a drop down (combo box) in my application that is populated with values from a JSON array object. Can someone please explain how to retrieve the selected value from the drop down in an AngularJS controller? Appreciate the help. ...

javascriptangularjs

Having a slight hiccup with pixel alignment and browser compatibility in my jQuery animation

To emphasize a specific paragraph element, I developed a JavaScript function that displays it above a darkened background. My approach involved using jQuery to generate an overlay and then duplicating the targeted paragraph element while positioning it ab ...

javascriptjquerycssxhtml

Executing a get request in Backbone without using the Option parameter by implementing the beforeSend method

After gathering insights from the responses to this and this queries, I have formulated the code below for a GET request: var setHeader = function (xhr) { xhr.setRequestHeader("Authorization", "Basic " + btoa($rootScope.login.Gebruikersnaam + ":" + $r ...

javascriptangularjsrestbackbone.jsget

angular-chart custom tooltip positioning issue

Hello everyone! I'm having trouble fixing the tooltip position when hovering over a point. I've searched through various posts on StackOverflow and have tried all the examples provided in my implementation: https://github.com/chartjs/Chart.js/tr ...

javascriptangularjs

Adjust the node_modules path tailored to your project

My current project structure looks like this: |-app |-... |-libs |- package.json |- index.html I am interested in organizing my project such that the 'node_modules' folder is inside the 'libs' folder. The desired structure is as fo ...

javascriptnode.jsnpm

What is the process for updating the default WordPress login page from wp-login.php to a customized login page?

Is there a way to customize the login page in WordPress so that instead of directing users to the default wp-login.php page, they are redirected to a unique custom login page? ...

phpjqueryhttp-redirectwordpress

Issue with conditional comment in IE 8 not functioning as expected

Struggling with changing the SRC attribute of my iFrame specifically for users on IE 8 or older. This is the code I have written: <script> var i_am_old_ie = false; <!--[if lte IE 8]> i_am_old_ie = true; <![endif]--> </script> ...

javascriptjqueryhtml

Is Nextjs prone to creating identical pages during the build process?

I have a question that I couldn't find the answer to anywhere, so I hope someone here can help me. I have a blog and I want to use SSG for the homepage and ISR for individual posts. If I set up my homepage using SSG to display 10 posts like this: ind ...

javascriptreactjsnext.js

Create an interactive list with the ability to be edited using HTML and

I'm currently working on a UI scenario that involves a text box field with two buttons beneath it. When the user clicks the first button, a popup will appear prompting them to input an IP address. Upon submitting the IP address in the popup, it will b ...

javascripthtml

The alignment of images loop and videos loop is off

https://i.stack.imgur.com/6o38F.jpg I am facing an issue with a td container in which I am using PHP to loop through a collection of videos and images. Strangely, the videos are displaying higher than the images even though they are both contained within ...

phpcssimageloopsvideo

The revalidateTag and revalidatePath features in Next.js are currently not functioning as expected

I attempted to utilize the revalidateTag and revalidatePath functions with Next.js version 14.2.3. The objective was: there is a server action to fetch a list of items. also, there is a server action to add an item. upon successful addition of an item, I ...

javascriptreactjstypescriptnext.jsserver-action

Is there a way to retrieve just one specific field from a Firestore query instead of fetching all fields?

I am experiencing an issue where I can successfully output all fields in the console, but I only want to display one specific field. In this case, I am trying to retrieve the ID field but I am encountering difficulties. Below are screenshots illustrating m ...

javascriptangulargoogle-cloud-firestoreangularfire

Tips for adjusting the width of a column with jquery

I am struggling with setting the width of a table column using jquery. The code snippet provided below does not seem to be working as expected. Can someone please assist me in resolving this issue? function addColumn(column) { var iHtml; iH ...

jqueryasp.net

Sometimes, in extremely rare instances, external stylesheets may fail to download or be properly applied

There have been very rare occurrences where major websites like Amazon and Facebook do not load a CSS file or apply the rules correctly, resulting in pages looking incomplete: I was recently asked to provide an internal explanation after receiving a compl ...

htmlcssbrowserstylesheet

Sped up object outpacing the mouse pointer

I'm currently developing a drag and drop minigame, but I've encountered an issue with the touch functionality. The draggable function (using only cursor) works flawlessly, however, when I tried to implement touch support for mobile and tablet use ...

javascriptdragdrop