I have an issue regarding a position: sticky element that flickers whenever I scroll the page in Google Chrome using the device toolbar and simulate different devices. However, when I don't use the device toolbar, the element works as it supposed to. It looks fine in Safari and Firefox as well. I saw a couple of workarounds using -webkit-transform: translate3d(0,0,0); and backface-visibility: hidden;, but I cant't seem to get it to work.
I'm using it inside a Next.js project.
Anybody experienced the same thing?
This is the css for the sticky element:
.StateTitle {
position: sticky;
top: 0;
padding-top: 45px;
z-index: 50;
width: 100%;
padding-bottom: 1px;
background-color: #FF7E7E;
}
And this is the css for the parent element:
.StateWrapper {
margin-top: 0;
width: 100%;
box-sizing: border-box;
position: relative;
}
I'm having hard time with an unordered list ul full width background on mobile. When I test it with Chrome, full width background shows without any issues (1st image below) but when I check it on my phone, I dont see the background (2nd image below).
The website address is here
.tabs--primary {
width: 100%;
background: #E9E8E8;
border: none;
position: relative;
padding: 15px 0;
margin-bottom: 1px;
min-height: 60px;
display: flow-root;
}
.tabs--primary:before, .tabs--primary:after {
content: "";
position: absolute;
background: #E9E8E8;
top: 0;
bottom: 0;
width: 9999px;
}
.tabs--primary:before {
right: 100%;
}
.tabs--primary:after {
left: 100%;
}
I believe this is an issue relating to iOS Safari, currently not supporting display: flow-root;. Most desktop browsers, however, including Chrome, currently support this feature.
This is most likely why you have different results based on if you are viewing the website on your desktop vs your iPhone.
CanIUse display: flow-root;
Depending on how your CSS is set up you can try just using display: block; instead. However, if you are using it as a way to create a new block formatting context you will have to use some workarounds to get it to work. Here's a great article about the clearfix hack.
I created a custom header for a pre-made responsive theme. It looks great in chrome, but both firefox and ie aren't showing all of the menu items and are positioning a logo::after shadow in a weird spot.
I already verified that there are no errors in my code and tried implementing normalize.css, but nothing has worked to fix the problem.
This is the code I'm using:
.logo::after {
content: "";
background: transparent url("/wp-content/themes/porto/images/shadow.png") repeat scroll 0% 0%;
width: 247px;
height: 14px;
position: absolute;
top: 64px;
right: 30px;
min-height: 0px;
}
#main-menu {
position: relative;
margin-right: 15%;
margin-bottom: 2%;
}
What am I doing wrong here? Thanks for the help!
I've got 2 elements, 2 images of exactly the same dimensions, positioned one on top of the other. Say they're called A and B (A is the top one). What I've done is made it so when you hover over A, its z-index decrements by 2 so that B is now on top, and B's hover: increments its z-index by 2 so it's now higher by 1 than A's original z-index (thus image B stays on top until you remove mouse). So basically...
#A {z-index: 5;}
#B {z-index: 4;}
#A:hover {z-index: 3;}
#B:hover {z-index: 6;}
This works perfectly in Firefox and Chrome, but IE doesn't want to hear about it, and my images keep spazzing while hovering over them. Any help is appreciated. Positioning is Absolute, if that matters.
#jklm313
That actually works in my IE9 as well. Maybe I should post the full code since one of my "images" is actually a social network button. So here it is:
HTML:
<div id="myTweetBrown"></div>
<div id="myTweet"><?php include ("myPHP/homepageSoc/tweet.php") ?></div>
CSS:
#myTweetBrown {
position: absolute;
background-image: url('../images/tweetBrown.png');
background-repeat: no-repeat;
background-position: center center;
height: 20px;
width: 54px;
left: 381px;
top: 662px;
z-index: 5;
}
#myTweetBrown:hover {
position: absolute;
z-index: 3;
}
#myTweet {
position: absolute;
height: 20px;
width: 54px;
left: 381px;
top: 662px;
z-index: 4;
}
#myTweet:hover {
position: absolute;
z-index: 6;
}
tweet.php:
Tweet
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
Link to demo website: ***** -- scroll down to Tweet button
This will be up only for so long, because I don't want people to have access like that <.<
Just going to rewrite my whole answer now the source code has been provided.
All "modern" versions of IE, when not in quirks mode, accept this code perfectly fine for divs and links. The problem in IE arises for iframes and other unusual elements, at which point its rendering engine seems to fail. (Shock!) You'll get this flickering for no apparent reason, except perhaps the conflicting doctypes in the iframe and page, which I would also try avoid if possible.
Presuming this link is generated by twitter, I would advise a fallback approach for IE. Instead of hovering between your button image and a twitter provided button image, I would just manipulate the css of the button twitter provided inside the iframe using javascript.
document.getElementsByTagName('iframe')[0].getElementsByTagName('a')[0].className += 'myTweetBrown';
The button looks to be generated by HTML5 rather than being a static image, so it shouldn't be difficult to manipulate:
.myTweetBrown:hover {
background-image: url('../images/tweetBrown.png') !important;
background-repeat: no-repeat !important;
background-position: center center !important;
height: 20px !important;
width: 55px !important;
}
.myTweetBrown:hover * {
display: none;
}
The other approach you could take is keep doing what you were doing before, but applying the styles differently like so, dependant on display:
#myTweetBrown {
position: absolute;
background-image: url('../images/tweetBrown.png');
background-repeat: no-repeat;
background-position: center center;
height: 20px;
width: 54px;
left: 381px;
top: 662px;
z-index: 5;
}
#myTweetBrown:hover {
opacity: 0;
}
#myTweet {
position: absolute;
height: 20px;
width: 54px;
left: 381px;
top: 662px;
z-index: 3;
}
Technically, CSS doesn't actually specify how and when elements go in and out of the "hover" state. So it sounds like when A goes under B, your version of IE removes the hover state from A and it immediately pops back in front of B, before B gets the hover state and pops further in front.
How about wrapping the two in a div, and testing for the hover state on that? Does that work?
http://jsfiddle.net/X64au/
Try wrap them in a div
.parent
{
position:relative;
z-index:1000;
}
.a
{
position: absolute;
z-index : 1001;
display: inline-block;
}
.b
{
position: absolute;
z-index: 1002;
display: inline-block;
}
I have a little problem that I cant solve.
I made a dropdown menu, and its OK but in Chrome I can only see the hover effect on the child elements, and can on the parents.
In FF and IE its OK only Chrome is the bad one, could someone give me a hint?
nav.main_menu {
position: relative;
top: 29px;
left: 220px;
bottom: 1px;
height: 90px;
width: 680px;
z-index: 3000;
}
div#container {
width: 980px;
margin: 0 auto;
padding: 38px 0px;
position: relative;
z-index: 1000;
}
It's OK in any other browsers but not in IE
Are you using a CSS reset sheet. I find that solves some of my cross browser issues.
http://meyerweb.com/eric/tools/css/reset/
(you should really show your markup)