sergiotarxz/Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Twenty Seventeen: Fix Customizer preview display issues in IE9

Browse Source 
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.


git-svn-id: https://develop.svn.wordpress.org/trunk@39215 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
David A. Kennedy 2016-11-13 23:30:53 +00:00
parent 2158edc28f
commit 40b3a5a878
2 changed files with 43 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/wp-content/themes/twentyseventeen/assets/css/ie9.css Normal file
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;
}
}

6
src/wp-content/themes/twentyseventeen/functions.php
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' );
}
// 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.
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' );