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.