Safari doesn't render some CSS

[810311]

Hi,

The following contact page renders properly in all browsers except Safari.

https://prygara.com/contact/

Here’s what I get on Safari mobile browser on my iPhone:

1. The word “Send” on submit button doesn’t show when the page loads.

2. The word “Send” shows and on hover CSS styles seems to work when the button is pressed.

3. Button appears more rounded compared to other browsers

4. I downloaded Safari on my Windows 10 machine and it wouldn’t open at all

Any suggestions?

[Gandalf]

@810311

I downloaded Safari on my Windows 10 machine and it wouldn’t open at all

Safari is no longer available for Windows. It hasn’t been for about a decade.

[Thallius]

It works good with Safari on MAC. It works not on iPhone.

So its hard to debug for me and I can only guess. But what happens if you set explicitly a color attribute to the wpcf7-submit? At the moment there is only a background color attribute. Also you can try to make the font a little bit smaller.

[PaulOB]

You set the background to white but the default color of a button in safari IOS is white so you get white text on a white background. One of the first rules of css is that when you set a background color you need to set a foreground color also

You also need to get rid of the default appearance of the button on ios as it uses its native controls.

.wpcf7-submit{
color:#888;
-webkit-appearance:none;
appearance:none;
}

@Thallius

So its hard to debug for me and I can only guess.

Open the link in Safari ios on your iphone and then you can plug your phone into your mac via the usb. Next go to safari on the Mac desktop and select Develop from the top menu and there will be an option to use the developer tools to debug live the code on your phone. The changes you make on the mac will be reflected on your phone.

[810311]

@PaulOB

You set the background to white but the default color of a button in safari IOS is white

Thanks for catching this Paul.

[810311]

@PaulOB

You also need to get rid of the default appearance of the button on ios as it uses its native controls.

I added those rules, cleared cache on Safari on my phone and it works now.
Thanks guys.