Twenty Seventeen: Fix Customizer preview display issues in IE9

IE9 doesn't understands `vh ` (vertical height) when inside of an `iframe`. Normally IE9 will understand `vh` as the vertical height relative to the viewport, but in an `iframe`, IE9 thinks the vertical height is relative to the size of the whole page. So this fixes that when the site is viewed in the Customizer preview – an `iframe`.

Props laurelfulford.

Fixes #38722.

Built from https://develop.svn.wordpress.org/trunk@39215


git-svn-id: http://core.svn.wordpress.org/trunk@39155 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
David A. Kennedy 2016-11-13 23:31:31 +00:00
parent fd166077ad
commit d902f1f167
3 changed files with 44 additions and 1 deletions

View File

@ -0,0 +1,37 @@
/*
Theme Name: Twenty Seventeen
Description: IE9 specific styles.
*/
.has-header-image.twentyseventeen-front-page .custom-header,
.has-header-image.home.blog .custom-header {
height: 300px;
}
.has-header-image .custom-header-image img,
.has-header-image .custom-header-image video,
.has-header-image .custom-header-image iframe {
min-width: 100%;
}
@media screen and (min-width: 30em) {
.has-header-image.twentyseventeen-front-page .custom-header,
.has-header-image.home.blog .custom-header,
.twentyseventeen-front-page.has-header-image .custom-header-image,
.home.blog.has-header-image .custom-header-image,
.panel-image {
height: 700px;
}
}
@media screen and (min-width: 48em) {
.has-header-image.twentyseventeen-front-page .custom-header,
.has-header-image.home.blog .custom-header,
.twentyseventeen-front-page.has-header-image .custom-header-image,
.home.blog.has-header-image .custom-header-image,
.panel-image {
height: 1000px;
}
}

View File

@ -356,6 +356,12 @@ function twentyseventeen_scripts() {
wp_enqueue_style( 'twentyseventeen-colors-dark', get_theme_file_uri( '/assets/css/colors-dark.css' ), array( 'twentyseventeen-style' ), '1.0' ); wp_enqueue_style( 'twentyseventeen-colors-dark', get_theme_file_uri( '/assets/css/colors-dark.css' ), array( 'twentyseventeen-style' ), '1.0' );
} }
// Load the Internet Explorer 9 specific stylesheet, to fix display issues in the Customizer.
if ( is_customize_preview() ) {
wp_enqueue_style( 'twentyseventeen-ie9', get_theme_file_uri( '/assets/css/ie9.css' ), array( 'twentyseventeen-style' ), '1.0' );
wp_style_add_data( 'twentyseventeen-ie9', 'conditional', 'IE 9' );
}
// Load the Internet Explorer 8 specific stylesheet. // Load the Internet Explorer 8 specific stylesheet.
wp_enqueue_style( 'twentyseventeen-ie8', get_theme_file_uri( '/assets/css/ie8.css' ), array( 'twentyseventeen-style' ), '1.0' ); wp_enqueue_style( 'twentyseventeen-ie8', get_theme_file_uri( '/assets/css/ie8.css' ), array( 'twentyseventeen-style' ), '1.0' );
wp_style_add_data( 'twentyseventeen-ie8', 'conditional', 'lt IE 9' ); wp_style_add_data( 'twentyseventeen-ie8', 'conditional', 'lt IE 9' );

View File

@ -4,7 +4,7 @@
* *
* @global string $wp_version * @global string $wp_version
*/ */
$wp_version = '4.7-beta3-39214'; $wp_version = '4.7-beta3-39215';
/** /**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema. * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.