The button icon fails to display correctly on the iPhone X, despite appearing correctly in the DevTools

Recently, I designed a "Scroll to top" button for my application. During testing using Chrome and Safari DevTools, the button appeared correctly on all devices:

https://i.sstatic.net/Apb8I.png

However, upon opening it on an iPhone X, I noticed that the icon inside the button was not displaying properly, despite the DevTools indicating it should:

https://i.sstatic.net/qH6wg.png

Below is the snippet of HTML code:

<div class="scroll-to-top" [ngClass]="{'show-scrollTop': windowScrolled}">
  <button class="scroll-to-top-button" (click)="scrollToTop()">
    <i class="fa fa-chevron-up scroll-to-top-arrow"></i>
  </button>
</div>

And here is the accompanying CSS code:

.scroll-to-top {
  position: fixed;
  bottom: 15px;
  right: 15px;
  opacity: 0;
  transition: all 0.2s ease-in-out;
  color: white;
}
.show-scrollTop {
  opacity: 1;
  transition: background-color 0.3s, opacity 0.5s, visibility 0.5s;
}
.scroll-to-top-button {
  background-color: #7496ee;
  border-radius: 100px;
  width: 50px;
  height: 50px;
  color: white;
}
.scroll-to-top-button:hover {
  background-color: darken(#7496ee, 5%);
}
.scroll-to-top-arrow {
  font-size: 30px;
}

To provide additional context, this application is developed using Angular framework.

Answer №1

To resolve this issue, I made sure to explicitly set the button content to be centered and removed any padding from the button code (although the padding seemed unrelated to the solution):

.scroll-to-top-button {
  background-color: #7496ee;
  border-radius: 100px;
  width: 50px;
  height: 50px;
  color: white;
  text-align: center !important;
  padding: 0 !important;
}

Despite appearing correctly in DevTools, it still had positioning issues on mobile devices (seemingly shifting to the right side).

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

My customized mat-error seems to be malfunctioning. Does anyone have any insight as to why?

Encountering an issue where the mat-error is not functioning as intended. A custom component was created to manage errors, but it is not behaving correctly upon rendering. Here is the relevant page code: <mat-form-field appearance="outline"> < ...

When using the onclick function, an unexpected behavior occurs where instead of displaying content, the page

Below is a summarized version of my code: HTML <a onclick="showHideDiv('bio')" target='_self'> bio <div id="bio" class="shadowScreen" style="display: none;"> <p class="showBio"> Bio! </p> &l ...

Display only months and years in the NgbDatepicker

Struggling with configuring the NgbDatepicker directive in my Bootstrap 4 and Angular 4 powered app. I only want to display months and years, similar to credit cards. Selecting a specific day is not important to me, I just need to choose the month and yea ...

The main div element is experiencing an overflow due to the excessive

I am struggling to create a homepage layout with three columns of varying heights within the 'content' division. The columns keep overflowing onto the content below, causing layout issues. I have attempted using positioning to solve this problem ...

Exploring the capabilities of Angular2 in conjunction with Symfony3's FOSOAuthServerBundle for secure

Trying to integrate my angular2 frontend app with a symfony backend. Currently using FOSOAuthServerBundle (https://github.com/FriendsOfSymfony/FOSOAuthServerBundle) for authorization, but struggling to fully grasp the implementation process. Experiment ...

What is the best way to initiate a function upon each page load?

(Apologies in advance for any English mistakes) Hello everyone, I am currently developing a simple Chrome extension to edit certain graphics and text fields on a website (Freshdesk) that cannot be modified directly on the site due to proprietary code. ...

Small hiccup in jQuery leading to duplicate entries in the field

I am attempting to use jQuery to add the value of a select box to both a hidden input field and a div that is displayed in public view. Below is the code I have: <script type='text/javascript'> $("#departments_submit").click(function(){ ...

Is your Bootstrap input displaying the has-error class with a glyphicon, but the alignment is not vertically centered?

What is the reason for the misalignment of glyphicon-warning-sign form-control-feedback vertically in the code below after applying font-size: 20px; to the label? <div class="container"> <div class="content align-left contact"> ...

What is the correct way to write this unusual '<a>' tag markup using Pug language?

For a list of additional features and functionalities, click here. I'm attempting to write the above in Pug format. I've tried translating it directly from HTML, but it's not displaying correctly. Below is my attempt: li For more features ...

I encountered an issue while attempting to fetch table data, receiving the following error message: "Uncaught TypeError: result.rows.product is not a function at products.html:134."

https://i.sstatic.net/WZ5CC.pngHere is the HTML I have written <form> <br/> <label for="products1">Product Name:</label> <input type="text" name="pdt" id="pr ...

The term 'Signal' in Angular is typically used as a type, but in this context, it is being treated as a value.ts(2693)

Using angular version 17.2.0, I am facing an issue in my service import { Injectable } from '@angular/core'; import { Signal, ReadOnlySignal } from '@angular/core'; @Injectable({ providedIn: 'root' // Service available thro ...

Using Angular's [ngIf], [ngIfElse], and [ngIfElseIf] functionalities enables dynamic content rendering

Currently, I have the following code snippet: <ng-container *ngIf="someCondition"> <ng-template [ngIf]="cd.typedType === 'first'" [ngIfElse]="Second"> <div class="row"> fir ...

Only Story members are permitted to read in Firestore security rules

Lately, I've been diving into the world of firestore and encountering a persistent struggle. Within my firestore database, there exist Story documents structured as follows: story: { name: 'James', members: { 'WeWF34RFD23RF23& ...

Troubleshooting: Why is my ng serve command in Angular 5 not

Whenever I try to run ng serve, an error pops up ng : The term 'ng' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is ...

Stop the execution of javascript code based on the screen width

On my website, I have two menus located in different sections of the page. One menu is shown when the screen width is greater than 555px, while the other menu appears when the screen width is less than or equal to 555px. Although the menus are essentially ...

Crash of iOS Dropbox Datastore upon App Resume

When the user returns to my app, I wait for it to resume working and then trigger a sync event: - (void)applicationDidBecomeActive:(UIApplication *)application { NSLog(@"App resumed..."); //Initiate sync process [[PPDropbox shared] sync]; } Recentl ...

Tips for monitoring input content "live"

Currently, I am in the process of developing a web form that includes a text field intended to receive numeric values. If the user enters non-numeric characters into this field, the form will not submit. However, there is no error message displayed to noti ...

Ways to change the border color of Bootstrap cards

While working on my webpage, I utilized bootstrap cards to maintain a clean and organized layout. By default, bootstrap cards are white in color. Unlike the navbar, where you can easily set color options like navbar-dark, changing the color of the cards re ...

I encountered an issue where the font awesome icons failed to load on my website

My website is experiencing an issue where all the Font Awesome icons are not displaying despite having added Font Awesome. Here is the link to my site: https://i.stack.imgur.com/RcNtv.png .login-top .lg-in::before { font-family: "Fontawesome"; ...

What is the correct way to bind by reference when utilizing a function that returns an object?

I currently have an object in my Component: this.user = Authentication.user; It's working perfectly fine as it copies the reference. So, if Authentication.user changes, this.user in my Component also changes accordingly. However, I am curious to kn ...