Website rendering tearing problem observed in Webkit on iOS browsers

I'm encountering a strange issue with my website's rendering specifically on iOS webview browsers such as Safari, Chrome, and Firefox. This problem only seems to occur on iOS devices and is not replicable on PC, Mac, or Android devices.

Initially, the site loads perfectly fine. However, after several reloads of the page or locking the device for a few seconds, upon reopening, screen tearing appears. I've tried various troubleshooting methods such as removing elements from the page, animations, and React components, but nothing seems to fix the issue. When inspecting the webpage using Safari developer tools, no errors are appearing.

The website is built using GatsbyJS as a static site generator, Reactstrap for Bootstrap, and FontAwesome for fonts. There are some animated SVG elements on the page, but even removing them doesn't resolve the problem. Initially, I suspected a memory leak in React and removed all React logic, but the issue persisted.

If anyone has any ideas or suggestions on how to debug and solve this issue, I would greatly appreciate it.

Click here for a screenshot showing the screen tearing during webpage render

javascriptioscssreactjsgatsby

Answer №1

Finally uncovered the culprit after hours of frustration.

The problem appears to be related to using filter:drop-shadow in the CSS.

.shadowed-alpha {
  -webkit-filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.22));
  filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.22));
}

Once I removed the drop-shadow from my div, the issue disappeared. Unfortunately, there seems to be a lack of documentation on this particular issue. Box-shadows function properly, but drop-shadows do not. I require the alpha based drop-shadow filter for a transparent png that is being used, however, for the time being I have omitted it on iOS until an alternate solution can be found.

Answer №2

Recently encountered this issue on a project of mine. Initially, I suspected it was due to a lack of support for clip-path, as we are utilizing that in our project. However, it turned out to be caused by filter: drop-shadow.

Reproducing the issue is quite challenging, but after experimenting with scaling, zooming, and panning, it occasionally manifests itself.

To showcase the problem, I created a codepen example: https://codepen.io/seanmaisch/full/BgZxbx

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

Like the Word outline view, the list view can be easily collapsed and expanded with a simple click

I've seen a few examples, but I haven't been able to achieve what I'm looking for. I need to extract text from a field and convert it into an outline view similar to the one in Word. Is this possible? Any help would be greatly appreciated. I ...

javascripthtmlcssjsonjelly

Tips for adding a search bar to a material-ui MenuItem?

Can someone guide me on how to add a search input within the component? I reviewed the material-ui documentation, tried various approaches, but haven't been successful yet. Here's the code for the demo What I attempted: const searchBar = `${& ...

javascriptreactjsmaterial-ui

Generating a downloadable picture with jQuery freeze frame

If you're looking to add animation to a gif upon mouseover, the Freezeframe plugin created by Chris Antonellis is the perfect solution. Simply use the command below: < img src="image.gif" freezeframe /> For a live example, visit his website he ...

jqueryhtmlcss

The jQuery placeholder plugin encounters an error stating 'jQuery is not defined'

Having an issue on this specific page where I keep encountering a 'jQuery is not defined' error in both Chrome and IE because of the jQuery placeholder script. The declaration of jQuery comes before the plugin script. Checked for any conflicts ...

javascriptjqueryhtml

Is it possible to include custom icons and text within a column layout when the flex direction is set to row

Trying to create a single line clickable section with a play button, text, and YouTube video thumbnail. It's not rendering correctly even though the container is set as flex with row direction. Custom play button and properly sized thumbnail are in p ...

htmlcss

The controller does not initially receive the state when the handleSubmit function is first triggered, but it successfully receives it the second time

Utilizing cloudinary for user avatar image uploads within a next js application, I have implemented a backend controller file to handle the process of updating profile data in mongoDB with node js. The issue arises when trying to pass the URL of the cloudi ...

node.jsreactjsnext.jscloudinary

What causes text inside a fieldset to sometimes appear bigger when viewed on mobile devices?

Have you ever noticed a strange quirk in Chrome that you couldn't quite explain? I recently stumbled upon a peculiar "feature" while using fieldset with responsive design. It seemed that the text within the fieldset appeared disproportionately larger ...

htmlcssresponsive

Check out this unexpected margin issue affecting the first element within the Container! Can you please provide an explanation for this anomaly?

Take a moment to check out this fiddle. In Container1 and Container2, the background color is set to #ccc, and h1 and .logo div have margins. While the left and right margins are working properly, the top and bottom margins are not functioning as expected. ...

htmlcssmargin

Vuetify - Best practices for vertically aligning rows in a v-treeview component

Just getting started with Vue js, so pardon me if this is a silly question. I've scoured the internet and can't seem to find a solution. I'm working on a v-treeview displaying a folder structure, with descriptions of each folder in a separa ...

javascriptcssvue.jsvuetify.js

React-Router DOM failing to display the content from additional pages

// App.js import React from 'react'; import Contact from './Contact'; import About from './About'; import Nav from './Nav'; import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'; function ...

reactjs

A class with Three.js

I attempted to consolidate all the necessary functionalities into a single class to create a straightforward three.js scene with a cube. Despite not encountering any errors, the scene remains black when viewed in the browser. Here is the code I've wri ...

javascriptthree.js

Using jQuery to dynamically load content from a link using Ajax

How can I modify a link element with an href link to a page to use Ajax to load that content from the href URL without redirecting the user to that page? I want to inject the content into the current page. <a class="bind-jquery-event-here-class" href=" ...

javascriptjqueryajax

Automatically insert a comma for type=number in VueJS

Is there a method available to automatically insert commas into an input type="number" field in vue js? I need this functionality to trigger the IME options in Microsoft and prevent users from inputting Japanese characters. <ui-textbox label="initial" ...

javascriptvue.js

Creating getter and setter functions for an input field model property in Angular

I need help creating getter and setter methods for an input field property. Here is my attempted code: import { Component } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', st ...

javascriptangular

Creating a Custom Alert Box in Javascript with Image Alignment

I have just finished creating a custom alert box using Javascript, complete with text and images. However, I am facing an issue with alignment. The output is not as expected. I am trying to display the correct mark and text on the same line. Can someone ...

javascriptjqueryhtmlajax

Monitor a user's activity and restrict the use of multiple windows or tabs using a combination of PHP and

I am looking to create a system that restricts visitors to view only one webpage at a time, allowing only one browser window or tab to be open. To achieve this, I have utilized a session variable named "is_viewing". When set to true, access to additional ...

phpjavascriptajax

How can I implement a redirect back to the previous query page post-authentication in Next.js 13?

To enhance security, whenever a user tries to access a protected route, I plan to automatically redirect them to the login page. Once they successfully log in, they will be redirected back to the original protected route they were trying to access. When w ...

javascriptreactjstypescriptnext.js

Having trouble with my ASP.Net OnClick Subs not functioning as desired

I have implemented onClick handlers to process button clicks that query SQL. The issue I am facing is that these queries sometimes take between 10 to 30 seconds to return a response. To prevent click-stacking during this time, I disabled the buttons. Howev ...

javascriptasp.netajaxvb.net

Can you effectively leverage a prop interface in React Typescript by combining it with another prop?

Essentially, I am looking to create a dynamic connection between the line injectComponentProps: object and the prop interface of the injectComponent. For example, it is currently set as injectComponentProps: InjectedComponentProps, but I want this associat ...

javascriptreactjstypescript

What is the best way to dynamically adjust my circular progress based on my data in React JS?

Currently, I'm working on a MERN application and I'd like to incorporate a circular progress feature into the dashboard. The goal is to have the circular indicator update based on the data retrieved from an API endpoint. While I've made some ...

reactjsmongodbapi