Я работаю над дочерней темой WP's Twentyseventeen, в которой используется VH для регулировки определенных высот, например, часть заголовка. В заголовке все, что я действительно хочу изменить, это добавить своего рода наклонный разделитель, чтобы сделать его более "стилусом sh", но независимо от того, что я делаю, в некоторых дисплеях я получаю следующую проблему:
Как видите, под делителем отображается 1 пиксель фона. (Кстати, это происходит не только на мобильных дисплеях, и это происходит в нескольких браузерах.)
Теперь вот мой код, относящийся к этой части (а также код 2017 года, который я Я знаю, что 2017 год как-то связан с этим разделом, но я не могу быть уверен, что в теме нет кода или сценария, влияющего на это поведение):
HTML:
<div class="custom-header">
<div class="custom-header-media">
<?php the_custom_header_markup(); ?>
</div>
<?php get_template_part( 'template-parts/header/site', 'branding' ); ?>
<div class="custom-header-bottom-divider">
<svg id="divider-bottom" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M0 100 L100 0 L100 100 Z"></path></svg>
</div>
</div><!-- .custom-header -->
CSS:
.custom-header {
position: relative;
overflow: hidden;
}
.has-header-image.twentyseventeen-front-page .custom-header,
.has-header-video.twentyseventeen-front-page .custom-header,
.has-header-image.home.blog .custom-header,
.has-header-video.home.blog .custom-header {
display: table;
height: 300px;
height: 75vh;
width: 100%;
}
.custom-header-media {
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
width: 100%;
}
.custom-header-media:before {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.3+75 */
background: -moz-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.3) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.3) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.3) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00000000", endColorstr="#4d000000", GradientType=0); /* IE6-9 */
bottom: 0;
content: "";
display: block;
height: 100%;
left: 0;
position: absolute;
right: 0;
z-index: 2;
}
.has-header-image .custom-header-media img,
.has-header-video .custom-header-media video,
.has-header-video .custom-header-media iframe {
position: fixed;
height: auto;
left: 50%;
max-width: 1000%;
min-height: 100%;
min-width: 100%;
min-width: 100vw; /* vw prevents 1px gap on left that 100% has */
width: auto;
top: 50%;
padding-bottom: 1px; /* Prevent header from extending beyond the footer */
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.custom-header-bottom-divider {
position: absolute;
bottom: 0;
left: 50%;
width: 100%;
min-width: 1000px;
text-align: center;
line-height: 1;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-o-transform: translateX(-50%);
-ms-transform: translateX(-50%);
z-index: 2;
}
.custom-header-bottom-divider svg {
display: block;
fill: #fff;
}
Я на 99% уверен, что это связано с тем, что 2017 год использует VH для установления sh высота заголовка. Т.е. это означает, что часто результат в пикселях будет не целым числом, а скорее чем-то вроде 932.45. Теперь я думаю, что теоретически браузер не может позиционировать объект между двумя пикселями, но если он округляется вверх или вниз, то я думаю, что по какой-то причине может быть несоответствие между пикселем, которое требуется для 0 для bottom: 0 и фактического пикселя, который требуется, чтобы быть нижней границей заголовка, таким образом, помещая дочерний элемент на 1 пиксель выше фактического основания.
Temp Solution / обходной путь:
Так что это не так Это реальное решение, по крайней мере, не так, как мне кажется. Это просто временное исправление, пока я не смогу понять, что происходит и как действительно решить это. Это должно быть довольно просто: если вы устанавливаете высоту элемента через CSS, соответствующую области просмотра, дочерний элемент, установленный в bottom: 0, должен фактически располагаться в абсолютном низу. Но это не происходит по какой-то причине. Возможно, это известная проблема с модулями области просмотра, или, возможно, тема 2017 года имеет какой-то другой сценарий кода os, над которым мы работаем. Во всяком случае, теперь я использую JS для решения проблемы:
var headerHeight = $customHeader.innerHeight();
$customHeader.animate({height: headerHeight});
Я подтвердил, что innerHeight фактически получает высоту, как показано, то есть в полных пикселях - целочисленных значениях - как Поза до точной высоты, которая задается через vh, которая имеет тенденцию иметь десятичные дроби.
Так что я динамически сбрасываю высоту до этого целочисленного значения, тем самым избегая необходимости для браузера округлять вверх или вниз при отображении.
Я полагаю, что проблема в том, что по какой-то причине рост родителя и положение ребенка разделяются при округлении; или положение ребенка устанавливается до того, как рост родителей будет округлен. В любом случае, я почти уверен, что этот разрыв в 1px связан с тем фактом, что нецелые значения участвуют в CSS.