Mobile devices cause CSS drop shadows to malfunction | Next.js

Update: After some testing, I discovered that this issue is specific to iPhones. When I tested it with an android device, everything worked perfectly fine. However, when I tried viewing the page on two different iPhones, it broke on both.

This problem seems to be related to mobile devices, as when I resize my browser window to mimic a mobile screen, everything appears normal. But when I actually view the site on my mobile device, the drop shadow effect "breaks" at random spots. Zooming in and out causes these breaks to move around.

The current CSS effect in use is:

filter: drop-shadow(20px 10px 4px #707070);

https://i.sstatic.net/BdyaB.jpg

cssreactjsiphonemobilenext.js

Answer №1

Upon delving deeper into the issue, I discovered that it was not isolated to my website alone. Interestingly, upon visiting the Mozilla MDN Docs on a recent iPhone device, the same effect could be observed when zoomed in. Following the suggestion from the documentation, I have decided to address this by posting it as an issue on Github. Here is how the drop shadow effect appeared on my mobile phone while viewing the Firefox Logo.

https://i.sstatic.net/bceXL.jpg

In accordance with a helpful comment, making the switch to a simpler box-shadow resolved the problem, albeit resulting in more defined edges and a slightly less faded appearance (using identical parameters). This adjustment does not negatively impact the project at hand, and I am aware of CSS features that can further enhance this aspect, so everything is under control!

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

Tips for preventing Chrome from masking the background image and color on an autofill input

Google Chrome Browser has caused the background-color and background-image effects to be removed from the Username and Password input fields. Before autocomplete https://i.stack.imgur.com/Ww7Hg.png After autocomplete https://i.stack.imgur.com/hbG2C.png ...

javascripthtmlcssgoogle-chrome

Adjust the text placement on the toggle switch to turn it On or Off

I am looking to create a toggle switch with a small size. I found some code on Stack Overflow that I tried but it didn't work as expected. The code snippet I attempted to use is from another helpful post. My goal is to have the "on" text align to th ...

htmlcss

What could be causing angular-datatable to not properly fill columns in Bootstrap 4?

I have been attempting to create a responsive table using angular-datatables (for angular 7) and bootstrap 4, but I am encountering issues with the current appearance of the table: Current HTML code: <div class="row"> <d ...

htmlcssangular7angular-datatables

Turn off TypeScript's type validation during production builds

For my petite project, I am utilizing Next.js with TypeScript. A thought has been lingering in my mind lately: is there a way to turn off the types validity checks while executing npm run build? Since the type checking occurs during npm run dev, it seems ...

typescriptnext.js

Is there a way for me to view the properties within the subcomponents?

Working on a project to create a bulletin board using React, following the official documentation. Decided to consolidate all actions related to the bulletin board into one alert component called AlertC. In the Form onSubmit statement, if the title is tr ...

javascriptreactjs

An issue with an unexpected character '' is encountered when uploading a local image on Next.js platform

I recently encountered an issue while trying to import a local image into my Next App using two different methods. 1. <img src={require("../image/blue-stock-trading-graph.png")} alt="hello" /> import logo from "../image/blue-stock-trading-graph ...

reactjsnext.js

Vue Quasar Drawer Layout with Bottom Bar

Struggling to implement a footer in my q-drawer. Below is the template and component code I am currently using: <template> <q-layout view="hHh lpR fFf"> <q-header elevated> <q-toolbar> <q-btn flat de ...

cssvue.jsquasar-framework

Hello there! I'm currently working on implementing a button that will alter the CSS grid layout

I need help designing a button that can alter the layout of my CSS grid. The grid information is contained within a class called 'container'. My goal is to change the grid layout by simply clicking a button, using either HTML and CSS or JavaScri ...

csscss-grid

The most effective method for monitoring updates to an array of objects in React

Imagine a scenario where an array of objects is stored in state like the example below: interface CheckItem { label: string; checked: boolean; disabled: boolean; } const [checkboxes, setCheckboxes] = useState<CheckItem[] | undefined>(undefined ...

javascriptreactjstypescript

Hover to stop menu movement

Can someone help me achieve a similar menu hover effect like this one? I'm trying to create a menu with a hold/pause effect on hover, specifically in the section titled "A programme for every vision". The goal is to navigate through the sub menus smo ...

javascriptjquerycss

changing up the format of nested blockquotes

My website includes various text features, which means that nested blockquotes are a possibility. I am now curious if it is feasible to style nested blockquotes differently from each other! blockquote{ background-color:#666; color:#fff; border ...

javascriptjqueryhtmlcss

Encountering "refused to apply inline styles error" while using Google Map React

CSP Issue: Our project is experiencing a strict content security issue where we are using style-src * and cannot include the unsafe-inline option. This is causing an error stating "refused to apply inline styles" and preventing CSS from being applied to G ...

reactjscontent-security-policyinline-stylesgoogle-map-react

Troubleshooting the issue of receiving a null value in the post request body when

I have recently started using axios and I am facing an issue with a post request. The problem is that when I pass an array to the request body to the backend, it comes out as null when the query is executed. Here are my Components: (The request is in &quo ...

reactjsaxiossequelize.js

I am developing a quiz application using JavaScript, and I am wondering how I can smoothly transition from one question to the

I'm working on developing a quiz application and I'm facing an issue where my quiz is skipping question 2 when moving from one question to the next using the "next" button. I have a total of 3 questions in my quiz and for some reason, it jumps fr ...

javascripthtmlcssfunction

The sound from the UILocalNotification continues to play without pause

I have chosen a unique .aif file that is 30 seconds long as the sound for my local notifications. The code below shows how I schedule these notifications. //Function for scheduling local notifications -(void)schedulelocalnotification:(NSDate *)particularf ...

iosiphoneaudiouilocalnotification

The homepage on the JSON server is currently not visible

I recently set up a react-app using npx create-react-app, added json-server to my package.json file, and configured the necessary run script. "devDependencies": { "json-server": "0.14.2", "react-scripts": " ...

reactjsnpmpackage.jsonjson-server

What is the best way to center an image and text vertically using bootstrap?

I'm currently working on a Bootstrap website and have reached a section where I want to display text on the left and an image on the right. While I've managed to achieve this layout, I'm struggling with vertically centering the image. Despit ...

htmltwitter-bootstrapcssflexbox

Adjusting the input label to be aligned inside the input box and positioned to the right side

I am currently working on aligning my input label inside the input box and positioning it to float right. The input boxes I am using have been extended from b4. Currently, this is how it appears (see arrow for desired alignment): https://i.stack.imgur.co ...

htmlcssvue.js

Troubleshooting and resolving login issues for external users (Guest Users) in Next-Auth authentication with Azure AD multi-tenant

I am looking to integrate Azure (Microsoft) authentication into my application alongside Google as the provider to eliminate the need for email and password sign-ups. While I have successfully implemented Google login without any issues, I am encountering ...

next.jsazure-active-directorynext-authazure-authentication

Is it beneficial to separate React and WebAPI into two distinct projects?

After spending 4 years in Asp.Net MVC and JQuery, I am looking to take the next step and transition to .Net Core 2, WebAPI, and React. I have been following various how-tos and tutorials, but what puzzles me is why every tutorial suggests adding React dir ...

.netreactjsasp.net-web-api