sacas.net - Footer flickers on page scroll for between 700 and 715 pixels

[tagawa]

URL: http://sacas.net/outgoing/2019/outgoing_schopschool.html

Browser / Version: Firefox 69.0 Operating System: macOS 10.14.6 Tested Another Browser: Yes

Problem type: Something else Description: Footer flickers on page scroll Steps to Reproduce:

1. On desktop, when the page loads try to scroll down.
2. The footer flickers, changing rapidly from visible to hidden.

Browser Configuration

• None

From webcompat.com with ❤️

[karlcow]

Interesting indeed. It works also after the page load. One needs also to make the window not too high. @tagawa it seems I get the same behavior in Chrome too. Maybe not a webcompat issue but just weirdly coded website.

[tagawa]

Hmm, it works properly for me in Vivaldi and Brave (I don't have Chrome to test).

[karlcow]

@tagawa does it happen if you use Firefox Nightly 71.

[karlcow]

@tagawa This is Firefox and Canary https://imgur.com/a/RJoFTMu

[wisniewskit]

I also cannot reproduce a flicker on the foot using today's nightly Firefox build, or Firefox 69.

@tagawa, does the flicker still reproduce for you on the latest Firefox version?

[tagawa]

Still happening for on FF 71.0b4 (dev edition) but I notice it's just when the window.innerHeight is between 700 and 715 pixels (that's the highest I could test).

[karlcow]

The script is calling a lot

  getWindowOffset: function (type) {
    if (type == 'x') return (window.pageXOffset || document.body.scrollLeft || document.body.parentNode.scrollLeft);
     else if (type == 'y') return (window.pageYOffset || document.body.scrollTop || document.body.parentNode.scrollTop)
  },

/! jQuery v1.7.2 jquery.com | jquery.org/license /

This is using

/*  ================================================================================
 *
 *  jQuery Page Scroller -version 3.0.9
 *  http://coliss.com/articles/build-websites/operation/javascript/296.html
 *  (c)2011 coliss.com
 *
 *  この作品は、クリエイティブ・コモンズの表示 2.1 日本ライセンスの下で
 *  ライセンスされています。
 *  この使用許諾条件を見るには、http://creativecommons.org/licenses/by-sa/2.1/jp/を
 *  チェックするか、クリエイティブ･コモンズに郵便にてお問い合わせください。
 *  住所は：559 Nathan Abbott Way, Stanford, California 94305, USA です。
 *
================================================================================  */

The page scroller code is obfuscated The latest update on this code is 2013年10月26日 https://coliss.com/articles/build-websites/operation/javascript/296.html

deactivating scroll anchoring doesn't change anything.

I don't think this library will be updated.

The full code https://gist.github.com/karlcow/d1c9b294a4ebd08338b26fce4f9a4544

[karlcow]

<div id="g_navi_box">
    <ul class="g_navi cf">
        <li class="logo">
            <img src="../../images/navi/navi_logo.jpg" alt="赤坂サカス">
        </li>
    </ul>
</div>

is modified by

jQuery(function($) {

var nav    = $('#g_navi_box'),
    offset = nav.offset();

$(window).scroll(function () {
  if($(window).scrollTop() > offset.top) {
    nav.addClass('fixed');
  } else {
    nav.removeClass('fixed');
  }
});

});

It adds the class fixed.

putting logs on the value.

16:06:18.295 scrolltop:  1 offset:  16 outgoing_schopschool.html:29:5
16:06:18.298 scrolltop:  3 offset:  16 outgoing_schopschool.html:29:5
16:06:18.388 scrolltop:  4 offset:  16 outgoing_schopschool.html:29:5
16:06:20.434 scrolltop:  5 offset:  16 outgoing_schopschool.html:29:5
16:06:21.978 scrolltop:  6 offset:  16 outgoing_schopschool.html:29:5
16:06:21.981 scrolltop:  7 offset:  16 outgoing_schopschool.html:29:5
16:06:22.157 scrolltop:  8 offset:  16 outgoing_schopschool.html:29:5
16:06:22.611 scrolltop:  9 offset:  16 outgoing_schopschool.html:29:5
16:06:26.834 scrolltop:  10 offset:  16 outgoing_schopschool.html:29:5
16:06:26.835 scrolltop:  11 offset:  16 outgoing_schopschool.html:29:5
16:06:26.837 scrolltop:  12 offset:  16 outgoing_schopschool.html:29:5
16:06:26.970 scrolltop:  14 offset:  16 outgoing_schopschool.html:29:5
16:06:26.971 scrolltop:  16 offset:  16 outgoing_schopschool.html:29:5
16:06:29.096 scrolltop:  17 offset:  16 outgoing_schopschool.html:29:5
16:06:29.098 scrolltop:  0 offset:  16 outgoing_schopschool.html:29:5
16:06:29.099 scrolltop:  1 offset:  16 outgoing_schopschool.html:29:5
16:06:29.218 scrolltop:  2 offset:  16 outgoing_schopschool.html:29:5
16:06:29.510 scrolltop:  3 offset:  16 outgoing_schopschool.html:29:5

when the window is just the right height, it creates the issue because the scrollable area gets modified by the position: fixed, and it's why it jumps. ​

We can move this to needscontact. And if someone is willing to contact them it's an easy fix.

just remove the JS

and adds

header {
        position: sticky;
        top: 0;
}

[softvision-oana-arbuzov]

I was not able to reproduce the flickering.

Tested with: Browser / Version: Firefox Nightly 92.0a1 (2021-07-22) Operating System: Mac OS Big Sur v.11.13.1, Windows 10 Pro

@tagawa does the issue still occur on your side?

[tagawa]

@softvision-oana-arbuzov Thanks for checking. Yes, this is still an issue (see attached screencast). Scrolling up is fine but scrolling down produces the footer flicker. Note it doesn't happen with a low window height – it only happens when window.innerHeight is more than about 700 pixels.

https://user-images.githubusercontent.com/94173/127427191-90a6de5f-bc77-4eb5-a159-c7cb3ff180cb.mov

Tested with: Browser / Version: Firefox Nightly 92.0a1 (2021-07-28) Operating System: Mac OS Big Sur v.11.4

[karlcow]

This is a profile. https://share.firefox.dev/3rG8cYy

.fixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10000;
}

As said they just need to be contacted. https://twitter.com/sacasinfo

[softvision-oana-arbuzov]

I'm not able to access the page anymore.

@tagawa does the issue still occur on your side?

[tagawa]

Hi @softvision-oana-arbuzov. Thanks for checking. Same for me – I can't access the page now so it looks like they've changed something, therefore closing this.