Site Rendered Oddly on Chrome Mobile
I'm wondering how to fix the issue of Chrome Mobile not displaying a div containing a select tag normally. It works properly on all other devices around my house!
I'm using Chrome on an iPhone 8 (yup its old) and it makes the div containing the select tag rounded with a gray background and wider (which messes up the layout too) than on other browsers! (For example when I use Safari it renders normally)
If you're up for solving this mystery and you have an iPhone, the URL is: https://tms57.github.io/apps/FractionCalculator/index.html
I looked into a way to get into dev tools using Windows connected to my iPhone but that looked like a very deep rabbit hole!
Thanks!
4 Replies
I think it's just the native styling of the select element, every browser does it a little different.
This is your site in Firefox 116.0.3 on windows
You can override some of the styling, like you already have:
select {
border-radius: 0;
background: white;
border: 1px solid gray;
} What sort of bothered me is that the entire look of the select dropdown changed (in Chrome Mobile) and the operation chosen wasn't even visible! I'll experiment with increasing it's width and failing that perhaps make a custom dropdown although this isn't a commercial app (as you can likely tell!) - just a hobby for me.
Thanks for the feedback.
I wish there was an easy way to get into Chrome mobile dev tools - that would make this much easier!!!