The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Very odd extra pixel in IE

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #195900

    Trying to make a responsive template in an effort to increase my CSS skills, everything went quite smoothly until I came across this weird issue in IE where it adds an extra pixel to the vertical offset when you scroll to the second item (‘services’). It it baffling me for several reasons – it doesn’t always happen for reasons I cannot reproduce and when opening dev tools, the issue suddenly disappears. There is also the behaviour that is responds differently to the order in which you click the links… click the third link (‘projects’) first of all and it is as should be – no offset. But if this link is clicked second, after ‘services’, it also has the offset. This behaviour is also noticeable by going back and forth over the links. The last one (‘contact’) always appears normally, as does the ‘home’ link.

    I’ve ‘hightlighted’ the elements inside the CSS to which I’ve narrowed down the issue. Removing overflow: hidden on #main seems to also make it disappear but that is an element that needs this style because one of the main blocks should be built out to the right and will be wider than the rest (and the scrollbar has to then be hidden).

    Thanks in advance for any insight. I’ve tried to be as clear as possible but it’s been wrecking by brain for over a day.

    Edit – with dev tools enabled, it doesn’t disappear anymore but it gets a different characteristic (moved more to the top). I think I missed this because an image was on above it before I made the reduced case.


    And I now also notice something similar happens with FF – but only on a smaller screen. What am I missing here…

    Cr*p – one of the ids was incorrect so the link (to ‘projects’) didn’t work.
    The extra pixel appears with IE on a large screen, small screen is okay. Firefox on the other hand does the reverse. Opera, fine on large screen. Also weird but different on smaller sizes. What the…

    Maybe I’ll do padding and margin for the scrolling offset.
    Pseudo element seems so much nicer though.


    Anyway, I tried giving the .section elements display: inline-block. That made the page scroll correctly but created empty spaces.

    Earlier posts don’t seem too coherent but that’s because the issue’s quite elusive. There’s one more thing to add – when I said some browsers were acting correctly, that isn’t really the case either. Both the header and the :before segments are the same size, with box-sizing: border-box applied yet they are not completely overlapping. Both edges are visible in almost all of the cases. The content’s :before elements are 1px too high. Doesn’t matter if viewport units or percentages are used.
    Or even if it’s calculated with JS. Another thing I don’t get.

    This issue made me discover something interesting though. If the following is used, box-sizing will not apply to pseudo elements :

    * {box-sizing: border-box}

    Gotta be this :

    *, *:before, *:after {box-sizing: border-box}

    Or maybe even better :

    html {box-sizing: border-box}
    *, *:before, *:after {box-sizing: inherit}

    But that’s slightly besides the point. :-)

    Edit – looks like that issue is related though, becoming apparent when the border of :before element is set to 5px (and white) for example.

    Could you maybe change the topic title, @Paulie_D? To something more appropriate like ‘Inconsistent pseudo element behaviour’. At least, that’s what I think comes closest. Still mostly clueless here.


    Rarely happens but the hosting is down. Here’s a pen instead – weird things are taking place when you resize, on any browser actually. Must be pixel rounding although I am fully ignorant of how that could be.

    Final thought – scroll position itself. :-/
    Edit once more… nope, weirdest I ever saw. The same element gets a :before block that is suddenly a pixel bigger (measured by comparing the red top border) depending on the order in which the links are clicked.


    Both the header and the :before segments are the same size, with box-sizing: border-box applied yet they are not completely overlapping.

    This one was rather obvious – the section itself also has a border which is on the edge of the pseudo element’s.

    The main issue is still there though. The :before height definitely gets a phantom pixel that you suddenly don’t even see anymore when you scroll down for a screenshot. But I caught it in the act :

    And it’s also really random with changing screen size. Sometimes all the middle links have it – or occasionally only a single one of them (in case of the above image where side by side links were pasted).


    The :before height definitely gets a phantom pixel that you suddenly don’t even see anymore when you scroll down for a screenshot.

    Newly found that it does keep the incorrect height…

    How extremely odd that there’s nothing on Google about this. But without an answer (which would be a first, really) I’m gonna have to go with another solution than pseudo elements. The unpredictability would otherwise annoy me forever.

    But still another update – even fixed heights for the header and pseudo element do not solve the problem. Only things that removes it, is defining the height of .section in pixels. Which isn’t helping a whole lot to get to the bottom of it. The height of the sections are always the same (tested with JS) whether the extra pixels is added to the pseudo element or not. Can’t see the correlation.


    I’m going with padding this time around. All this messing about to find the cause, just for a fallback – I’ll be overriding it with JS anyway.


    So let me babble on about this for one more post… because I did get very close to the answer and found a general solution in any case.

    Even with padding applied instead of a pseudo element, the anchor position that is scrolled to when the menu links are clicked are somewhat ‘wobbly’ and inconsistent. The same link may jump around a pixel. Turns out this is because of a combination of using viewport units (likely percentages too) which have many decimals and the fact that the offset position that is read is not consistent, so not even on the same anchor! It may vary by half a pixel – making sometimes for a rounding down, other times up. Each time a link is clicked, it is recalculated and that may not always have the same result.

    This makes me think the phantom pixel that was added to the pseudo elements is not what it appears to be. Rather than an actual difference in height, it must be some sort of reflection of this inconsistent scroll position.

    Anyway, the only solution seems to be to merely use the current CSS layout (using vh) as a fallback and recalculate stuff with JS – making sure the sections and their padding (which must be used now since pseudo elements cannot be targeted with jQuery) have an exact height in pixel. Made a little viewport unit calculator to override things :

    $(window).on('load resize', function() {
    $('.section').each(function() {
    $(this).css({'height': vh(85), 'padding-top': vh(22)); 
    function vh(units) {
    return Math.round(units/100*$(window).height());

    Note (to self) how visiting this site has made me think mobile (as well) and avoid JS whenever it is possible.

    That’s all folks (but you never know, lol).


    Gotta mention you don’t need an each there (short edit times)… rusty with JQ already! Works well for the rest. Good for ‘modernizing’ too because viewport units were late to be cross browser supported.

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.