Fixed element disappears in Chrome
This is a webkit issue that has yet to be resolved, oddly making the jump with JavaScript, rather than using the # url value, doesn't cause the problem. To overcome the issue, I supplied a JavaScript version that takes the anchor value and finds the absolute position of the element with that ID and jump to that:
var elements = document.getElementsByTagName('a');
for(var i = 1; i < elements.length; i++) {
elements[i].onclick = function() {
var hash = this.hash.substr(1),
elementTop = document.getElementById(hash).offsetTop;
window.scrollTo(0, elementTop + 125);
window.location.hash = '';
return false;
}
}
I could refine this further and make it is that only it only looks for links beginning with a #, rather than ever a tag it finds.
fixed rotated elements disappears on scroll in google chrome
Adding translateZ(0) to the rotated elements forces the browser to use hardware acceleration to access the device’s graphical processing unit (GPU) to make pixels fly and keeps them painted on scroll down.
I have created a issue on the chromium tracker regarding this bug: https://bugs.chromium.org/p/chromium/issues/detail?id=700333
Fixed Div disappears in mobile browsers
Move the nav element outside of the header div and change the css .header nav to .menu and .header nav ul to .menu ul
http://jsfiddle.net/seanmurrin/yg0b053s/
$(document).ready(function() {
/****** Full Size JQuery ************/
/****** Mobile Size JQuery ************/// Show sidebar$(".header-image").click(function() { $('.menu').toggleClass("menu-open"); $('.header').toggleClass("menu-open");});
// Show submenu$(".nav-lvl-1 li").click(function() { $(this).find("ul").toggleClass("sub-menu-open-mobile"); $(this).find("a").toggleClass("sub-menu-open-mobile");});
});* { font-family: Arial, Helvetica, sans-serif; color: #333333;}
/* Container CSS Attributes*/h1 { //color: #333333; text-align: center; margin: 0px; padding: 0px;}
/* Container CSS Attributes*/h2 { color: white; text-align: center; margin: 0px; padding: 0px;}
/* Highlight background color */::selection { background: #6ab014; /* WebKit/Blink Browsers */}::-moz-selection { background: #6ab014; /* Gecko Browsers */}
/**********************************Containers**********************************/
/* Container CSS Attributes*/.container { position: relative; padding-top: 5px; padding-bottom: 5px; width: 100%; margin:0;}
.h2-container { background-color: #6ab014;}
/********* Side Menu **********/
.menu { Display:none;}
/**********************************************************************//********* Start CSS for less than or equal to 768px screen ***********/@media only screen and (max-width:768px){
.header-upper, .footer-external{ display:none; } .header { position: fixed; top: 0; left: 0; width: 100%; background: #6ab014; z-index: 100001; height: 75px; overflow: hidden; -webkit-transition: height 0.3s; -moz-transition: height 0.3s; transition: height 0.3s; text-align: center; background-image: url("/images/mobile_expand.svg"); background-repeat: no-repeat; } .header.menu-open { background-image: url("/images/mobile_retract.svg"); } .header .header-image img{ content:url("/images/logo_mobile.svg"); height: 50px; width: 160px; margin-top: 12px; } /********* Disable link to open sub-menu **********/ .header .header-image a { pointer-events: none; cursor: pointer; } /* Stop header from overlapping container */ .container { position: relative; margin-top: 75px; width: 100%; } .main { position: block; width: 90%; max-width: 80em; margin: 0 auto; }
/********* Side Menu **********/ .menu { position: fixed; display:block; left: -330px; top: 75px; background: #87cc33; width: 330px; bottom: 0; z-index: 1000; overflow:auto; /* Transitions */ -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; }
.menu ul { padding: 0; margin: 0; list-style-type: none; }
/* Make menu above others */ .menu { z-index:100; }
/* Open menu CSS */ .menu.menu-open { left: 0px; }
/********* Navigation Sub-menus **********/ .menu .nav-lvl-2.sub-menu-open-mobile{ /* Max-height may have to change with more sublinks */ max-height: 1000px; display: block; opacity: 1; }
.menu .nav-lvl-2 { background: #a5e25b; max-height: 0px; display: none; opacity: 0; /* Transitions */ -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; }
.menu .nav-lvl-2 a { border-bottom: 1px solid #fff; }
/********* Disable links to open sub-menu **********/ .has-sub-menu { pointer-events: none; cursor: pointer; }
.menu li:hover { cursor: pointer; }
/********* Link CSS **********/ .menu a{ display: block; color: #fff; font-size: 1.1em; font-weight: 300; border-bottom: 1px solid #a5e25b; padding: 1em; text-decoration: none; }
/******* Mobile dropdown arrow - down *********/ a.has-sub-menu:not(.sub-menu-open-mobile):before { position: absolute; content: ""; left: 290px; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 11px solid #fff; margin-top: 7px; }
/******* Mobile dropdown arrow - up *********/ a.has-sub-menu.sub-menu-open-mobile:before { position: absolute; content: ""; left: 290px; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 11px solid #fff; margin-top: 7px; }
/******* dropdown link css *********/ a.has-sub-menu:hover:before, a.has-sub-menu:focus:before, a.has-sub-menu:active:before { border-color: transparent #730800; }
a.has-sub-menu:hover:after, a.has-sub-menu:focus:after, a.has-sub-menu:active:after { border-color: #730800; } /* Stop header from overlapping container */ .container.first { margin-top: 75px; }
}/********* End CSS for less than or equal to 480px screen ***********/<!DOCTYPE html>
<body>
<div class="header"> <div class="header-inner"> <h1 class="header-image"><a href="/"><img src="/images/logo.svg" /></a></h1> </div></div><nav class="menu"> <ul class="nav-lvl-1"> <li><a href="/">Home</a></li> <li><a class="has-sub-menu" href="/Platform/">Platform</a> <ul class="nav-lvl-2"> <li><a href="http://google.com/">test1</a></li> <li><a href="http://google.com/">test2</a></li> <li><a href="http://google.com/">test3</a></li> <li><a href="http://google.com/">test4</a></li> </ul> </li> <li><a class="has-sub-menu" href="/modules/">Modules</a> <ul class="nav-lvl-2"> <li><a href="http://google.com/">test1</a></li> <li><a href="http://google.com/">test2</a></li> <li><a href="http://google.com/">test3</a></li> <li><a href="http://google.com/">test4</a></li> <li><a href="http://google.com/">test5</a></li> <li><a href="http://google.com/">test6</a></li> <li><a href="http://google.com/">test7</a></li> <li><a href="http://google.com/">test8</a></li> <li><a href="http://google.com/">test9</a></li> <li><a href="http://google.com/">test10</a></li> <li><a href="http://google.com/">test11</a></li> <li><a href="http://google.com/">test12</a></li> </ul> </li> <li><a href="http://google.com/nav">Hosting</a></li> <li><a class="has-sub-menu" href="http://google.com/nav">Resources</a> <ul class="nav-lvl-2"> <li><a href="http://google.com/">test1</a></li> <li><a href="http://google.com/">test2</a></li> <li><a href="http://google.com/">test3</a></li> <li><a href="http://google.com/">test4</a></li> <li><a href="http://google.com/">test5</a></li> </ul> </li> <li><a class="has-sub-menu" href="/contact/">Contact Us</a> <ul class="nav-lvl-2"> <li><a href="http://google.com/">test1</a></li> <li><a href="http://google.com/">test2</a></li> <li><a href="http://google.com/">test3</a></li> </ul> </li> </ul></nav>
<!-- Begin Container --><div class="container h2-container"> <div class="main"> <h2> H2 Title </h2> </div></div>
<!-- Begin Container --><div class="container"> <div class="main"> </div></div><!-- End Container -->
<!-- Begin Container --><div class="container"> <div class="main"> This is content. <br><br><br> This is content <br><br><br> This is content <br><br><br> This is content <br><br><br> This is content <br><br><br> This is content <br><br><br> This is content <br><br><br> This is content <br><br><br> This is content <br><br><br> This is content <br><br><br> This is content </div></div>
<!-- Begin Container --><div class="container"> <div class="main"> This is content. This is the last container. <br><br><br> This is content <br><br><br> This is content <br><br><br> This is content <br><br><br> This is content <br><br><br> This is content <br><br><br> This is content <br><br><br> This is content <br><br><br> This is content <br><br><br> This is content <br><br><br> This is content <br><br><br> Final content in the document. </div></div><!-- End Container -->Fixed positioned elements disappear on page unload
Fixed elements are lifted to a composited layer
and there is a corresponding bug on page unload.
From https://web.archive.org/web/20160509083333/https://newscentral.exsees.com/item/528d72c6d22fab46e4eb18e5cb8fece0-0d5a1eca143f58f995dc015e265514cb:
"[...] composited layers upon document unload are destroyed much faster than
elements that are not [...] This has been confirmed by a WebKit engineer to be a bug."
HOPE:
With iOS 8 a new faster web view component was introduced: WKWebView.
Safari use it. The problem went away when using Safari :)
I don't know if Chrome is affected under iOS 8.
I compare common UIWebView and new WKWebView under iOS 8.
Apps using UIWebView to display html/web content are still affected with the problem :(
Position fixed on chrome mobile causing element to move on scroll up/down
I found out.
For some god forsaken reason, my beloved Google Chrome on mobile require minimum-scale=1 on the viewport meta.
<meta name="viewport" content="minimum-scale=1">
It works now.
Elements briefly disappear and reappear on Chrome 77
The issue comes from your tabs list that has height 0. Why? => read here
This code should fix it:
ul.product-details-information-content-tabs {
float: left;
width: 100%;
margin: 0;
}
Related Topics
How to Customize the Browse Button
Remove Default Focus Outline and Change to Different Color
How to Change Link Color When Clicked
Calculate Text Color Depending to a Background Color
Bootstrap 4 How to Have Margin Between Columns Without Going Over Space
Need CSS Text Color for A:Hover to Take Precedence Over A:Visited
How to Do Browser Specific Conditional CSS Inside a *.CSS File
Galaxy S4 Stock Browser CSS3 Border-Radius Support
Bootstrap 4.1 - to Get Grid System Only
CSS Overlapping Elements & Opacity Issue
How to Target CSS3 Columns Individually with Selectors
Differencebetween Perspective and Transform's Perspective Properties in CSS
Differences Between Container, Row and Span in Bootstrap