I'm working on a child theme of WP's Twentyseventeen, which uses VH in order to adjust certain heights, such as the header portion. In the header all I really want to change is to add a sort of slanted divider to make it more "stylish" but no matter what I do, I'm getting the following issue in certain displays:
As you can see, 1px of the background is showing below the divider. (BTW, this doesn't only happen in mobile displays, and it happens in several browsers.)
Now, here's my code pertaining to this part (as well as 2017's code that I know 2017 has something to do with this section; but I can't be sure the theme doesn't have some code or script somewhere that's affecting this behaviour):
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;
}
I'm 99% sure this has to do with the fact that 2017 uses VH to establish the header's height. I.e. this means that often the result in pixels won't be an integer but rather something like 932.45. Now, I'm thinking that in theory the browser can't position an object between two pixels, but if it's rounding up or down, then I'm thinking for some reason there could be a discrepancy between the pixel it takes to be 0 for bottom: 0 and the actual pixel it takes to be the bottom border of the header, thereby positioning the child 1px above the actual bottom.
Temp Solution / Workaround:
So this isn't an actual solution, at least not as far as I'm concerned. It's just a temp fix until I can figure out what's going on and how to really solve it. It should be pretty straightforward: if you set an element's height through CSS respective to the viewport, a child element set to bottom: 0 should actually be placed at the absolute bottom. But it's not happening for some reason. Perhaps it's a known issue with viewport units or perhaps the 2017 theme has some other code os script that's mucking about. At any rate, I'm now using JS to manage the issue:
var headerHeight = $customHeader.innerHeight();
$customHeader.animate({height: headerHeight});
I corroborated that innerHeight actually retrieves the height as displayed, i.e. in full pixels—integer values—, as a pose to the precise height that is given through vh, which tends to have decimals.
So I'm dynamically resetting the height to that integer value, thereby avoiding the need for the browser to round up or down when displaying.
I believe the issue is that, for some reason, the parent's height and the child's position are being drawn apart when rounding; or the child's position is being set before the parent's height is rounded. At any rate, I'm pretty sure that that 1px gap has to do with the fact that non-integer values are involved in the CSS.
You could try modifying the bottom attribute for the divider, changing it to -1px
.custom-header-bottom-divider {
position: absolute;
bottom: -1px;
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;
}
I have a unique problem which I hope someone can help fix.
I have tweaked my WordPress header on CSS, canceling the background color, so that the background image can be seen instead (it is a white .png image with transparency at the bottom edge so that there is a pattern rather than a straight line at its bottom border).
see http://m.piccolo.co.il or https://piccolo.co.il (2 different websites).
the header's background-image has position: fixed (#masthead)
This works fine when you scroll down on a browser such as Chrome, or Explorer. However, when I scroll on IOS mobile, at some point the header's background-image disappears, leaving only the toggle bar and logo fixed.
screenshot from IOS10 - Iphone SE
This is the header's CSS:
#ht-masthead{
background-image: url('http://www.piccolo.co.il/wp-content/uploads/2017/04/ht-mast.gif');
background-repeat: no-repeat;
background-size: 100% 100px;
background-attachment: fixed !important;
width: 100%;
position: fixed;
top: 0;
z-index: 99;
transform: translateZ(0);
-moz-transform: translatez(0);
-ms-transform: translatez(0);
-o-transform: translatez(0);
-webkit-transform: translateZ(0);
-webkit-font-smoothing: antialiased;
}
Any suggestions would be great, I am getting very frustrated with this.
Seems like I managed a "patch solution" using the CSS after tag.
I gave #masthead:after these attributes forcing the torn pattered background there.
I applied it for now only to m.piccolo.co.il, like this:
#ht-masthead:after {
content: '';
position: absolute;
left: 0;
height: 100px;
right: 0;
background-repeat: repeat-x;
background-size: stretch;
background-image: url('http://m.piccolo.co.il/wp-content/uploads/2018/05/ht-mast2-1.png');
}
Any thoughts?
Thanks
I've been trying to scale a div, but not the content for a long time now. I've looked at examples and saw ways it was supposed to work, but it seems like it might be impossible to make it work :( the problem is that the image inside the div becomes blurry on scale. (on hover.)
Here's my codepen link
http://codepen.io/SusanneLundblad/pen/5cf90a3d7b3e2f592ebcb0ebb9d07bf9
.child
position: absolute
height: 450px
width: 20%
background-color: #1f2733
border-radius: 0
background-position: 50% 50%
background-size: cover
-webkit-transform: translate3d(0,0,0)
top: 0
overflow: hidden
z-index: 0
transition: all 0.05s ease-in-out
transform: translate3d(0,0,0)
&:hover
transform: scale(1.03)
z-index: 2
border-radius: 4px
cursor: pointer
box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.5)
.child__content
transform: translate(-50%,-50%) scale(.947)
thank you for any help
I am animating a line from 0 to 100%.
Keyframe CSS:
#keyframes animate-line {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
Line CSS:
.line {
animation: animate-line 5s infinite;
background: none repeat scroll 0px 0px transparent;
border-top: 2px solid rgba(255, 255, 255, 0.5);
display: block;
position: absolute;
z-index: 9;
height: 1px;
-moz-transform: rotate(16deg);
-webkit-transform: rotate(16deg);
transform: rotate(16deg);
left: 20px;
top: 200px;
}
I am using vendor prefixes everywhere in live code, omitted here for readability.
You can see I rotate the line with transform: rotate(); doing that makes the line veer up going from 0 to 100%. I can think logically why it is doing that, I define the left/top properties so I would think it starts at top: 200px and left: 20px and expand as expected but why it still wants to veer up ?
Running demo on jsfiddle
Hopefully someone can point this out, I'm sure its simple.
ANSWER: Just learned about a new property transform-origin: 0 0 thanks to #barrett. It can be useful to animate a rotated line, and if anyone else is doing that using transform-origin: 0; is a huge piece, thanks.
Add this to your stylesheet on .line:
.line {
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
}
By default it will transform from the center which is why it moves up.
Running demo
I have successfully implemented the CSS to scale across browsers as previously shown (with add-ons and edits) in this thread:
How can I scale the content of an iframe?
But now I find that it does not work in Safari on an iPad. Can anyone shed some light here? The working code I have is at http://gfx.com/example
Here is the current CSS...
#framewrap { width: 238px; height: 303px; padding: 0; overflow: hidden; }
#myframe { width: 990px; height: 1260px; overflow: hidden; z-index:10; }
#myframe {
-ms-zoom: 0.24;
-moz-transform: scale(0.24);
-moz-transform-origin: 0 0;
-o-transform: scale(0.24);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.24);
-webkit-transform-origin: 0 0;
}
The goal is to have the loaded webpage (iframe source) scale to the iframe.
Avoid Using Iframes on Mobile Safari because there is a rendering bug that apple/web-kit has yet to fix.