The search bar that I have in my PWAs looks weird on iPhone, so I researched and managed to find a solution to it.
However, the CSS styling will only apply to the search bar when I first land or come from another page
When I refresh the page, it will look like this.
Here is my css styling.
input[type="search"] {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
-webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
Does anyone know what is the exact reason?