The infamous Safari browser on macOS has issues with CSS Grid. You can not use height: 100% inside the grid in Safari browser. Solution: Put display:grid on the div surrounding your grid container.
Safe Area on iPhone
Sometimes we are facing an issue on the iPhone devices because of the Toolbar at the bottom of the screen. If we have a sticky button at the bottom of the screen, for example, it’s difficult to click on that button through over iPhone X devices since the toolbar occupies some area of the screen. …
CSS – “position: fixed;”
On the iPhone devices, the position:fixed; property doesn’t work when users try to input the values. For this reason, the DOM element with position:fixed property will be displayed somewhere that we didn’t want. To fix this issue, we can add the following CSS properties while the input board is activated.
Popper.js – JavaScript positioning library
Popper.js is a library for positioning elements relative to other elements, like tooltip positioning or dock positioning. Famous libraries and frameworks are using Popper.js library to position tooltips and hover effects, including bootstrap. There are plenty of options and plugins to make Popper.js a powerful positioning library, including auto flipping, keeping target inside a certain …