Home Wordpress fixed header disappears on mobile scroll
Reply: 0

Wordpress fixed header disappears on mobile scroll

user1393
1#
user1393 Published in May 24, 2018, 11:20 pm

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.

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.337634 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO