Page zooming (on mobile) when interacting with contact form input fields…

It looks to be an iOS Safari specific behavior. Something that Safari adds to sites. Can you please check if the same thing happens if you switch to a default theme like Twenty Fifteen.

Right, let’s try this again.

https://siteorigin.com/wp-content/uploads/2015/07/vantage-child-no-scale.zip

Switch back to Vantage.
Hover over Origami Child. Delete.
Install this ZIP from Appearance > Themes > Add New: Upload Theme.

Apologies again for the mistake.

Would you mind temporarily switching over to Twenty Fifteen or any other default theme and re-testing. I want to see if the zoom is happening with another stylesheet in use. Thanks.

The child theme looks to be functioning as expected. I’d suggest sticking with it. If ever need to make a custom edit in the future you won’t need to redo all the Customize settings agian.

When I check the site now in Vantage in iOS Safari there isn’t any more zooming when I click a form field. The screen shifts down to the field and the background and border color changes to white.

Which operating system and browser are you testing in. Thanks.

Awesome, thanks for clearing that up.

The problem is originating from your Custom CSS. If you developed the Custom CSS section please could you take a look at the focus pseudo classes in use. Something in this area here:

input[type=text],
input[type=email],
textarea {
  border: 3px solid #6288be;
  border-radius: 10px;
  background-color: #1e55a2;
  padding: 15px;
  color: #ffffff!important;
  font-size: 1em;
}

input:focus,
textarea:focus {
  outline: none;
  background-color: #ffffff;
  color: #1e55a2!important;
  border-color: #ffffff;
}

Quick test for us: Remove everything in Custom CSS just temporarily. Test on mobile. Let me know the result. Thanks.

I see it. I’m almost certain this is a core iOS feature. It can be tough rolling back these kinds of core user interface features. If you have a moment please also hit Google for us and see what you come up with. I’ve been looking but am open to suggestions.

Apologies for the hassle. I’m removing the original action in our child theme meta viewport before it’s been hooked. The result is our new viewport is being placed before the original, therefore not working.

After the opening PHP tag let’s replace the entire contents of functions.php (child theme) with the following:

/**
 * Enqueue the parent theme stylesheet.
 */
function vantage_child_enqueue_parent_style() {
    wp_enqueue_style( 'vantage-parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'vantage_child_enqueue_parent_style', 8 );

function vantage_child_theme_setup() {
    remove_action( 'wp_head', 'vantage_responsive_header' );
}
add_action( 'after_setup_theme', 'vantage_child_theme_setup' );

/**
 * Add the responsive header
 */
function vantage_child_responsive_header() {
	?><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><?php
}
add_action( 'wp_head', 'vantage_child_responsive_header' );

Hoping this works :)

Awesome! Win!

Sorry I didn’t catch the child theme mistake earlier.

I’ll need to chat to Greg about the current viewport and what he’d like to do with that. There might be a reason he stuck with the one you had before.

I’d recommend sticking with the child theme because if you ever need to introduce a theme file code edit in the future you’ll have the child theme ready and won’t have to redo any Customize options.

Thanks for your patience on this!

Cheers for now.