Encountering an unusual CSS problem specifically on iOS devices like the iPhone

Seeking assistance with a design issue on native devices: The icons (DOT-lottie-files) are being cut off on all edges. Here is an example on a native iPhone.

Interestingly, when I view the site on an iPhone or any other iOS device using Chrome developer tools, the icons display properly. The same goes for Android devices. Here is an example on an iPhone with dev tools.

I suspect that I need to make changes to my CSS. Currently, I have this line of code to center the icons:

style="width: 120px; margin-left: auto; margin-right: auto;"

It's worth noting that there is also some Bootstrap in use. The CSS block looks like this: Inline CSS placement.

However, I believe there must be a different CSS approach to address this issue. Could someone please take a look and help me solve this? It's really frustrating!

The website in question is: .

I've encountered this problem on two iPhones and an iPad (all native). On Android and in Developer Tools, everything appears normal. I've tried adjusting the width and adding padding in CSS, but it hasn't resolved the issue.

Thank you in advance for your assistance!

cssioslottieafter-effectsinline-styles

Answer №1

After some investigation, I discovered the root of the issue. It turns out that the problem is not with CSS but rather due to limitations in Lottie features (which are created by After Effects) on iOS. Once I removed the Gaussian blur effect, the issue disappeared as well. So if anyone else encounters similar issues, it could be related to missing features. For more information on Lottie Features for all devices, you can refer to this link: Link to Lottie Supported Features

Icon one is without the blur

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

What is the best way to align elements within a row/column layout in Angular Material when working with divs?

To set up two div blocks in a row, I'm utilizing the code below: <div layout="column" layout-gt-xs="row" layout-align="center center" id="row"> <div id="a">a</div> <div id="b">b</div> </div> The CSS for this ...

cssangularjsangular-material

JavaScript programming does not rely on using the onclick method to style HTML elements

For a recent project, I was tasked with creating a toggle-style button setup for the challenge on CodePen. To achieve a 3D appearance for the button, I wrote some JavaScript code that utilized the onclick event. var on = true const green = document.getElem ...

javascripthtmlcss

The placement of the floating element completely messes up the

Whenever I try to float an element in my magnificent popup, the layout gets all messed up. You can see for yourself by trying to put the image and text next to each other using "float: left": http://jsfiddle.net/a7Vj8/1/ Every time I attempt to float th ...

htmlcss

Set Video to Private and insert a Preformatted Title with VimeoUpload

Currently integrating VimeoUpload developed by Alfie Hanssen: https://github.com/alfiehanssen In order to enhance my app, I am looking to configure the videos as either private or password protected. ...

iosvimeovimeo-ios

What are the best practices for utilizing CSS position (relative, absolute) combined with percentage dimensions for height and width?

There are numerous questions and answers related to this topic, but I have not come across a case like the one mentioned below. Everyone talks about setting the height and width in percentage by first setting the parent's height in percentage, but it ...

css

What could go wrong when placing a UITabBarController within a UINavigationController?

I have a stack with the following hierarchy (I've created it programmatically): UINavigationController -> UITabBarController -> UInavigationController -> UIViewController -> UInavigationControl ...

iosswift

"Ensuring a mobile-friendly website menu's z-index is

I'm currently working on developing a responsive menu, but I've encountered some issues with setting the correct Z-index values. The problem arises when trying to add a "show menu" button that expands behind the main content (cwrap) after window ...

htmlcssresponsive-designz-indexconcrete5

A pair of div containers arranged in rows

I currently have 9 different div containers, each with unique styling for spacing and padding. My goal is to arrange these div cards into 2 rows with sufficient spacing between them for easy readability. As of now, I have all the div containers stacked in ...

htmlcssbootstrap-4

creating an iOS app that adapts to various screen resolutions

I am currently developing a 3D iOS game using Unity3d, and I am struggling to find a clear answer on how to include different texture sizes for different devices. It seems that for a universal app, I will need three versions of each texture - one for non- ...

iosscreen-resolution

Tips for managing the fixed position property in CSS when dealing with overlapping elements

This image displays the overlap of two divs. One div contains a table with two buttons floating on the right, while the other div features an image. Here, the overlapping issue does not occur. I have detailed my problem with overlapping above and I aim t ...

htmlcssasp.netvisual-web-developer

I am facing issues with getting my slideshows to work on localhost using node

After careful positioning of my divs using position: relative; for the slideshow and position: absolute; for containers, I am facing an issue. Despite trying to fix it based on similar questions posted by others, the slideshow is not functioning properly. ...

javascripthtmlcssnode.jsexpress

Styling a CSS-HTML unordered list menu with a separator that is perfectly aligned with

Currently, the menu has been created with the following CSS: nav{ width:1024px; margin: 0 auto; } ul{ display: flex; justify-content: space-between; } li { border-right: 1.1px solid #333333; margin: 0 auto; padding: 0 1em; text-align: center; flex-grow ...

htmlcss

Unlock the Power of Call Blocking & Identification on Your iOS Device: A Step-by-Step Guide

I currently have ios 14 and am trying to implement a feature in my app that opens call blocking and identification settings when a button is pressed. Here is the code I am using: import SwiftUI import CallKit struct ContentView: View { var body: some ...

iosswiftswiftuicallkitcallblocking

Is it Possible for IE9 to Coexist with Rounded Corners and CSS Background Gradients?

Encountering an odd issue in IE9 while attempting to display a background gradient. The approach involves applying multiple classes to a container element. <div class="gradient corners"></div> Here is the CSS being used: .gradient { backgro ...

htmlcssinternet-explorer-9conditional-comments

Enhancing UIAlertController with Your Personal Touch

Would it be possible to modify the UIAlertController to have a custom look similar to this: https://i.sstatic.net/ZU14A.png Currently, it appears like this: https://i.sstatic.net/1Nqq6.png I am aware of how to remove the cancel action. What I need is f ...

iosswiftuialertcontroller

Tips for concealing the navigation bar during page printing in Bootstrap 5

When attempting to print the page body, I am encountering an issue where the vertical "navbar" continues to display and covers a portion of the content. Below is the code I am using to hide the navbar when printing: @media print and (min-width: 800px){ ...

htmlcssbootstrap-5

Hovering over one of two identical divs will trigger an effect

Having a bit of trouble with CSS hover... I have two divs in the same class and I need to specify hover effects for only one of them. I've tried some solutions but they either don't work or change colors on both. <div class="container iphone" ...

htmlcss

What is the method for retrieving the CSS value of a pseudo element using Selenium in Python?

My webpage contains the following HTML snippet: <div id="foo" class="bar" title> ::before </div> When using Chrome or Firefox and selecting ::before, I can view the CSS in the Styles tab: .SomeTitle .bar::before{ content: "required_value" ...

pythonhtmlcssselenium

Web Page Loading Animation: Keeping Users Engaged

I have developed an app that displays articles from an RSS feed in a table view. When a row is selected, it opens a web view controller to show the article. I am currently working on adding a loading indicator to enhance user experience. However, I am faci ...

iosuiwebviewactivity-indicator

Do you know the steps to achieve consistent spacing above and below my homepage gallery?

I am currently working on a website template with additional CSS modifications. I do not have much code to add, except for what is provided below. You can view my site that I am trying to fix. The code snippet below was added by me in an attempt to adjus ...

cssgalleryspacetemp