Pseudo Elements disappear in chrome but not firefox

StackOverflow https://stackoverflow.com/questions/20383065

Question

I'm currently working on a project which requires a border on the top of the element and on the bottom and for it to be extended to the edge of the page. I have a wrapper that is at 960px wide, i've set the overflow-x to hidden on body and html. and i'm using the following styles.

#profile-page{
    position:relative;
    overflow:hidden;
}
#profile-page .bottom:after, #profile-page .bottom:before {
  content: "";
  position: absolute;
  left: 0px;
  right: 0px;
  height: 5px;
  background-image: -webkit-linear-gradient(0deg, #7ad100 95px, #00bce8 95px, #00bce8 190px, #ffde00 190px, #ffde00 285px, #ff5942 285px, #ff5942 380px);
  background-image: -ms-linear-gradient(0deg, #7ad100 95px, #00bce8 95px, #00bce8 190px, #ffde00 190px, #ffde00 285px, #ff5942 285px, #ff5942 380px);
  background-image: -moz-linear-gradient(0deg, #7ad100 95px, #00bce8 95px, #00bce8 190px, #ffde00 190px, #ffde00 285px, #ff5942 285px, #ff5942 380px);
  background-size: 380px;
}

#profile-page .bottom:before{
  top: -2px;
}
#profile-page .bottom:after{
  bottom: -2px;
}
#profile-page .bottom{
    padding-left:3000px;
    margin-left:-3000px;
    padding-right:3000px;
    margin-right:-3000px;
    position:relative;
    background: #ffffff;
}

The styling shows up fine in firefox, it doesn't show up in chrome or ie9(haven't tested others). I've included screenshots so you can see the actual output.

If i remove the styling to make .bottom stretch to the edge of the screen, the styling shows up in chrome. I can not figure what piece of that styling is messing with my pseudo elements but hoping someone here would know. Thanks in advance.

EDIT: Just wanted to clear this up, if I remove the following rules that I put REMOVE next to the psuedos show up. But then my div no longer reaches the edge of the screen and is contained to the wrapper, which can't happen

 #profile-page .bottom{
    padding-left:3000px; -REMOVE
    margin-left:-3000px; -REMOVE
    padding-right:3000px; -REMOVE
    margin-right:-3000px; -REMOVE
    position:relative;
    background: #ffffff;
}

CSS is sort of written in less, Tried to take out any Less shortcuts but might have missed some just incase people think they see something wrong.

EDIT: As requested, HTML Structure

<html>
<body id="profile-page">
  <div id="wrapper">
    <div class="top"></div>
    <div class="item bottom">
      <div id="profile-content">PROFILE LINKS</div>
    </div>
  </div>
</body>
</html>

Firefox

Chrome

Top is firefox, bottom chrome

Was it helpful?

Solution

From my tests: Chrome limits the size of the pseudo-elements :before and :after to 1900px (at least in this case): http://jsfiddle.net/xLF8r/4/

In your case, you set the padding/margins on .bottom to 2900px/-2900px to so the gradient will be seen to the edge of the body. If you change that to 950px/-950px, they show up. If you set the width of the pseudo-elements to 1900px, they show up. If you set right: -280%, they show up (it calculates in this instance to -1900px).

If you look at this fiddle in Firefox, the elements show up no matter what you set these sizes to.

Another test: Changing background-size allowed the element to get larger and stay visible: http://jsfiddle.net/xLF8r/6/

So if you increase your background-size and change your gradient to get it to look like you have it by adding more color-stops, it should work.

From these tests, it would appear that chrome limits the size of the pseudo element to be only 5 times larger than the background-size. 1900px / 380px = 5 in first test; 1901px makes the element disappear. 6900px / 1380px = 5 in the second test; 6901px makes the element disappear.

Edit for another test and for future reference I was curious, so I created a Codepen looking at some examples. Here, I'm able to go up to 10 times the background-size. Putting the same code into jsfiddle also shows that 10 times is working. So in your code, there is something that is reducing it to 5 times.

I've reduced your code to replicate this same behavior, and I'm still only getting 5 times larger instead of 10. I'm stumped as to why this is the case.

OTHER TIPS

just remove the line // position:relative;
from the lines
#profile-page .bottom{
    padding-left:3000px;
    margin-left:-3000px;
    padding-right:3000px;
    margin-right:-3000px;
    position:relative;
    background: #ffffff;
}

I am sure it will work.
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top