apple computer users - check website input fields for me

[unwashed potato!]

i've had a few customers that use apple computers say that they can't input any text into the fields only on one certain page.

hoping users on this forum that use apple computers can help check for me if they can replicate the issue?

it's on the link below, and on the section in the screen show below.

please feel free to not submit the quote, and you can click next to everything without having selected anything until you get to this page.

End of Tenancy Cleaning Online Quote | Mayer Cleaning

www.mayercleaning.co.uk

 

[mi9tchy]

it works in chrome but in safari the form fields get very small

 

[unwashed potato!]

Yeah that's a problem. Thanks for letting me know.

 

[unwashed potato!]

so it turns out i can't download safari for windows. that sucks. any ideas how i can find the solution to fix this?

 

[visibleman]

Seems to working fine under Safari v16.5.2 (MacOS v13.4.1c Intel) -

Likewise for Firefox 115.0.2 (Mac) -

Edge/Chromium (Mac) Browsers -

(click images to maximise)

@mi9tchy - Was yours under Silicon or Intel? Latest MacOS? Does it have the latest RSR update, eg - (c)?

As for a solution to debugging, easiest would be to grab a Mac, use one of the 'cloud' MacOS providers or VM MacOS if you have a half decent spec PC (Google is your friend here as i suspect it's against forum policy to discuss this).

Edit - One of the recent RSR updates, (a), caused an issue with Safari and it's useragent string (it included (c) in the string causing issues with some detection; Facebook and a load of other sites struggled to handle it), so i wonder if it's anything to do with that. Most recent RSR, (c), fixed the useragent.

 

[mi9tchy]

Hi mines apple silicon m1

the useragent "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.3 Safari/605.1.15"

 

[mi9tchy]

just a quick look but could be this class

swapping it for something like seemed to work

there seems to be other issues going on, on this page though with the white on white text too

 

[visibleman]

Hi mines apple silicon m1

the useragent "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.3 Safari/605.1.15"

Suggests you're using 16.3 Might be a rendering issue with older versions if so.

@unwashed potato! - You might be able to bodge something by using CSS/JS to detect Safari, and/or specific or older versions, and specify fixed widths for those form elements as @mi9tchy has pointed out.
But assuming it's a WordPress/CMS site using a form plugin, then it's worth seeing if there is an update and contacting the dev to see if there is a fix.

 

[unwashed potato!]

But assuming it's a WordPress/CMS site using a form plugin, then it's worth seeing if there is an update and contacting the dev to see if there is a fix

It is not. Just something I put together myself.

Thanks for the advice. Will have a play.

My cocern is that it also may have issues on mobile versions using safari. I don't fancy buying an apple device, so will look to the vm option

 

[mi9tchy]

@visibleman is there some way to update safari seperately to the rest of the OS say im on ventura 13.2 and no updates available, i dont usually use it as it's become the internet explorer of the internet now

​

 

[visibleman]

My cocern is that it also may have issues on mobile versions using safari. I don't fancy buying an apple device, so will look to the vm option

You can definitely use VirtualBox/VMWare Fusion etc to get MacOS going; you just need an ISO of MacOS. As said, Googling will get you there but if you get stuck, especially if you need the ISO, then just shout (probably best to PM etc).

@visibleman is there some way to update safari separately to the rest of the OS say I'm on ventura 13.2 and no updates available, i don't usually use it as it's become the internet explorer of the internet now

Sometimes you can select updates individually from Settings > General > Software Updates, click More info etc. But i believe some Apple app versions/updates are MacOS version specific, so you may need to upgrade MacOS first.

You could always have a look at the terminal command softwareupdate and see if you can update it individually through there, eg -

# To list available updates use
softwareupdate -l

# To update a package use the package name from the list, eg -
software -i Safari16.5VenturaAuto-16.3

With you on Safari being the new IE; absolute pain at times with sites and dev'ing for.

 

[mi9tchy]

You could always have a look at the terminal command softwareupdate and see if you can update it individually through there, eg -

# To list available updates use
softwareupdate -l

# To update a package use the package name from the list, eg -
software -i Safari16.5VenturaAuto-16.3

With you on Safari being the new IE; absolute pain at times with sites and dev'ing for.

running this now showing updates available thanks

 

[unwashed potato!]

just a quick look but could be this class

i've updated to include your min-width idea.

would you be able to check to see this has solved the problem? but more importantly, it still works on different page sizes/mobile?

thanks

 

[mi9tchy]

that page is looking better on safari and looks ok on iPhone

some of the other pages still look pretty odd in MacOS Safari though

 

[unwashed potato!]

that page is looking better on safari and looks ok on iPhone



some of the other pages still look pretty odd in MacOS Safari though

thanks for confirming. i think the issue seems to be that i'm using a table for the layout, and that version of safari doesn't like having TD as being display: inline-block. for all other browsers, when i set the TD to be inline-block, this works, and when i remove this line of code, they get messed up.

and then because i have td in the same tr element, but being displayed on a different line/row, again safari doesn't like this and tries to display all the td elements on the same line, rather than wrap around onto a new row.

any thoughts how i can sort this?

i've managed to install virtual box macOS, but it's incredibly slow to use, and on top, i can't work locally, so need to make the changed on my windows device, upload to the server, then refresh the macOS. makes it hard and slow to figure out

 

[visibleman]

@unwashed potato! - There's no doubt a proper solution but typically if i have to delve into frontend work and Safari is being a bit of a git, which happens more than it should to be honest (and not just with CSS stuff), then i just deploy Safari targeted CSS bodges. This Stackoverflow post (https://stackoverflow.com/questions/16348489/is-there-a-way-to-apply-styles-to-safari-only) has helped a lot in the past.

Make sure you've install the Virtualbox Guest drivers for MacOS as that makes a massive improvement otherwise you can always try VMWare to see if the performance is any better. But typically i find throwing cores and RAM at the guest MacOS instance does help (somewhat), likewise using an older MacOS version (like Monterey or Big Sur) over Venutra helps too.
Alternatively, try one of the many browser testing sites like BrowserStack or Browserling (there are tons of these) although a lot are subscription/credit based.
But an actual Mac is still arguably the best way of doing this unfortunately, just one of the joys of web dev'ing and needing an array of devices to check sites on.

 

[unwashed potato!]

that page is looking better on safari and looks ok on iPhone



some of the other pages still look pretty odd in MacOS Safari though

Any chance you can see if there's an improvement?

 

[mi9tchy]

looking better in safari now