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.
Android Android Angular CSS Data Visualization Discussion Frontend HTML ios Javascript jQuery Laravel Mobile React Native React.js UI/UX Vue.js
Mapbox GL
Mapbox GL is a suite of open-source libraries for embedding customizable and responsive client-side maps in web, mobile, and desktop applications. Mapbox GL maps render at a high frame rate. The abbreviation “GL” comes from OpenGL, the industry-standard Open Graphics Library. Mapbox GL allows you to use custom styles designed in Mapbox Studio. You can also manipulate every aspect of …
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 blur without image
In order to blur in html page normally css `filter: blur(npx)` is used. filter: url(“data:image/svg+xml;utf8,<svg xmlns=’http://www.w3.org/2000/svg‘ ><filter id=’svgMask’><feGaussianBlur stdDeviation=’3’ /></filter></svg>#svgMask”); This is also useful as well as normal filter. And you can utilize svg for further tricks too.
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.
Hover – double click issue on iPhone
When you use hover CSS event style, it won’t work on iphone. In this case, you will need to double click buttons applied hover CSS event style. Normally, button should work by one click. So it looks like issue. To prevent double click for issue, we need to remove hover event style for buttons. Try …
Creating a hole in a Div element
Box shadow support almost all modern browsers, so, you can do what you want (I hope, I understood you right) this way: html: css: So, the block will be transparent, and all around it will be hightlighted with its shadow. Example: http://codepen.io/anon/pen/ultKh
uncss – unnecessary css
https://uncss-online.com/ This is really useful link especially for AMP, we can reduce style size by removing unused styles. Really great service!