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);

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.

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

Transform your traditional sidebar into a sleek icon sidebar with Semantic UI

I am working on customizing the semantic-ui sidebar. My goal is to have it minimize to a labeled icon when the toggle button is clicked. However, I am having trouble with the animation and getting the content to be pulled when I minimize it to the labeled ...

javascriptjqueryhtmlcsssemantic-ui

The :focus pseudo-class is failing to target the input element

I'm dealing with a simple input field of type text: <input matInput type="text" placeholder="{{placeholder}}" class="input-field" [ngClass]="{'error': hasErrors}" [readonly]="isReadonly&quo ...

htmlcssangular8

Core-pages with polymer core have no set height limit

I am embarking on my first project using Polymer. I have implemented core-pages to facilitate navigation between different pages. However, I am facing an issue where the pages are not displaying with a white background-color as intended in the css. You ca ...

htmlcsspolymer

Issue with React Material-UI Popper - unable to reference popper element

I am attempting to create a specific behavior where the popper's placement changes from 'right' to 'right-end' when its bottom exceeds the window bottom while open. I have been trying to retrieve the bottom position from the refer ...

reactjsmaterial-ui

Storing multiple HTML elements in a variable with React allows for easy manipulation and

Looking to optimize some repeated code in a React component that renders HTML elements. Trying to save the repetitive html parts in a variable and then return them, but running into issues. const renderAddress = event => { if (event.venue.address.a ...

htmlreactjsjsx

What is the reason that property spreading is effective within Grid components but not in FormControl components?

Explore the sandbox environment here: https://codesandbox.io/s/agitated-ardinghelli-fnoj15?file=/src/temp4.tsx:0-1206. import { FormControl, FormControlProps, Grid, GridProps } from "@mui/material"; interface ICustomControlProps { gridProps?: ...

javascriptreactjstypescriptreact-nativematerial-ui

Troubleshooting CSS navigation bar hamburger dilemma

Currently, I am facing an issue with a toggle button on my website. When I click on the hamburger menu, the navigation bar does not show up even though the toggle feature is working perfectly fine. I have tried combining different sources to solve this pro ...

htmlcsshamburger-menu

The perplexity surrounding the concept of immutability in Redux

While studying Redux, I encountered some confusion regarding how the reducer updates the state. Consider this code snippet: const initialState = { counter: 0 }; const counterReducer = (state = initialState, action) => { if(action.type==="INCREASE" ...

reactjsredux

Snap to the top of the table with merged columns using scroll feature

I am currently attempting to create a table with horizontal scrolling and snapping behavior for the yellow header columns that span multiple columns. These headers should snap to the end of the red column, while always maintaining alignment at the beginnin ...

htmlcssscroll-snap

Setting the height of the text area in a three-column layout cannot be achieved using a percentage value

I'm working on creating a 3-column layout with two text areas. The issue I'm facing is that when I adjust the width of the text areas to create columns, the height shrinks. I need a solution that will be compatible with HTML5 browsers - support f ...

csshtmllayout

How can we prevent the modal from extending beyond the boundaries of the phone screen when zoomed in

I am currently developing a web application that features a large content page, specifically a map which should display detailed information upon zooming in similar to Google Maps. The interactive elements on my map are clickable, triggering a modal popup ...

javascriptcssangularjstwitter-bootstrapbootstrap-modal

Creating an executable JAR for your Next.js application: A step-by-step guide

Is there a way to ensure that my Next.js file can run seamlessly on any computer without the need for reinstallation of all modules? In my folder, nextjs-node, I have the following subfolders: components lib public node_modules page style package.json I ...

javascriptnext.jsexecutable

Having trouble finding module: Unable to locate 'fs' - yet another hurdle with NextJS

Trying to access a JSON file located one directory above the NextJS application directory can be tricky. In a standard JavaScript setup, you might use the following code: var fs = require('fs'); var data = JSON.parse(fs.readFileSync(directory_pat ...

javascriptnext.js

What is the best method for incorporating this into our website: React js, or any other website editor available?

What is the best way to incorporate this into our website - React JS or another platform? Editor ...

reactjseditormerneditorjs

Tips for aligning an icon vertically within a span tag

I have a span similar to this: <span class="indicator"></span> Sometimes this span contains numbers like: <span class="indicator"> <span>10</span> </span> Other times it may display Kendo-UI icons, such as: < ...

htmlcsskendo-ui

Issues encountered when setting up a Context Provider in React using TypeScript

I am currently in the process of setting up a Cart context in my React TypeScript project, inspired by the implementation found here: https://github.com/AlexSegen/react-shopping-cart/blob/master/src/contexts/CartContext.js. I'm encountering some conf ...

javascriptreactjstypescriptreact-context

What is the best way to write unit tests for a Material-ui textfield component with enzyme?

As I continue to learn ReactJS with Enzyme and Material-ui, I am facing a new challenge. In my component that utilizes Material-ui's TextField, I want to perform a unit test for a specific scenario. When a user inputs '123' into the TextF ...

reactjsmaterial-uienzyme

Error message stating "The file 'routes-manifest.json' was not found during NextJs deployment on Vercel"

My Next.js application was functioning correctly until I added some files to update my code. Now, it is failing to deploy on Vercel and showing this error message: https://i.stack.imgur.com/2y7CB.png Despite searching online for solutions, I haven't ...

node.jsreactjsdeploymentnext.jsvercel

Larger icon graphics

Is it possible to increase the size of Glyphicons in Twitter Bootstrap 3.0 without using the btn-lg class? I found this code that makes glyphicons big: <button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-th- ...

csstwitter-bootstraptwitter-bootstrap-3glyphicons

bespoke design picture holder

Is it possible to create a custom-shaped image container without using <div />? I encounter an issue when trying to add corners on top of the #content-box as shown in this screenshot: . The corner images only cover half of the block element, with th ...

csshtml