plugins - Flickering sidebar when scrolling page

admin2025-06-06 8

Closed. This question is off-topic. It is not currently accepting answers.

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 6 years ago.

Improve this question

I am an amateur WP developer building a site for my wife :) I am using Helium theme and the site is in RTL direction. I have a right side bar.

After making some changes by changing the main page content from text to SiteOrigin widgets buttons defined on top of "widgets for shrotcodes", the side bar starts flickering upon scrolling of the page: An example clip

This is the new main page content:

    [do_widget id=sow-button-10]
    [wonderplugin_cond deviceinclude="Mobile"]
    אל המאמרים שלי בשבילכם - גוללו מטה!
    [/wonderplugin_cond]
    [do_widget id=sow-button-11] 
    [do_widget id=sow-button-12] 
    [do_widget id=sow-button-13] 
    [do_widget id=sow-button-14] 
    [do_widget id=sow-button-15] 
    [do_widget id=sow-button-16]

And this is the customized css:

body {background-color: white;}

.site_ttl{
    color: #3264ff;
    font-family: "David";
}

h1.entry-title{
    font-size:48px;
    color: #3264ff;
    margin-left: auto;
    margin-right: auto;
 }

#toggle_nav{
    font-size:14px;
    color:white;
    text-align: center;
    text-decoration: underline;
}

@media only screen and (min-width: 600px) {

    #primary.content-area {

        width: calc(100% - 400px);
        float: left;
        margin-bottom: 0px
    }
}

@media only screen and (max-width: 600px) {

    #primary.content-area {

        width: calc(100% - 100px);
        float: left;
        margin-bottom: 0px
    }
}

.sidebar.clearfix.floating {
    right: 0;
    left: initial;
    margin-left: 0;
}

/*-------------------*/

/*-------------------*/
/*To adjust the sidebar widget spacing*/

.sidebar .widget {
    margin-bottom: 0px;
}
/*-------------------*/

/*-------------------*/
/*To adjust the the h' titles spacing*/
h1 { margin-bottom: 0px; }
h2 { margin-bottom: 0px; }
h3 { margin-bottom: 0px; }
h4 { margin-bottom: 0px; }
h4 { margin-top: 0px; }
ul {margin-top: 0px}
ul {margin-bottom: 0px}
/*-------------------*/

/*hide triple line menu symbol*/
#main-menu{
    visibility: hidden
}

Please advise :)

Thanks!

Closed. This question is off-topic. It is not currently accepting answers.

Closed 6 years ago.

Improve this question

I am an amateur WP developer building a site for my wife :) I am using Helium theme and the site is in RTL direction. I have a right side bar.

This is the new main page content:

    [do_widget id=sow-button-10]
    [wonderplugin_cond deviceinclude="Mobile"]
    אל המאמרים שלי בשבילכם - גוללו מטה!
    [/wonderplugin_cond]
    [do_widget id=sow-button-11] 
    [do_widget id=sow-button-12] 
    [do_widget id=sow-button-13] 
    [do_widget id=sow-button-14] 
    [do_widget id=sow-button-15] 
    [do_widget id=sow-button-16]

And this is the customized css:

body {background-color: white;}

.site_ttl{
    color: #3264ff;
    font-family: "David";
}

h1.entry-title{
    font-size:48px;
    color: #3264ff;
    margin-left: auto;
    margin-right: auto;
 }

#toggle_nav{
    font-size:14px;
    color:white;
    text-align: center;
    text-decoration: underline;
}

@media only screen and (min-width: 600px) {

    #primary.content-area {

        width: calc(100% - 400px);
        float: left;
        margin-bottom: 0px
    }
}

@media only screen and (max-width: 600px) {

    #primary.content-area {

        width: calc(100% - 100px);
        float: left;
        margin-bottom: 0px
    }
}

.sidebar.clearfix.floating {
    right: 0;
    left: initial;
    margin-left: 0;
}

/*-------------------*/

/*-------------------*/
/*To adjust the sidebar widget spacing*/

.sidebar .widget {
    margin-bottom: 0px;
}
/*-------------------*/

/*-------------------*/
/*To adjust the the h' titles spacing*/
h1 { margin-bottom: 0px; }
h2 { margin-bottom: 0px; }
h3 { margin-bottom: 0px; }
h4 { margin-bottom: 0px; }
h4 { margin-top: 0px; }
ul {margin-top: 0px}
ul {margin-bottom: 0px}
/*-------------------*/

/*hide triple line menu symbol*/
#main-menu{
    visibility: hidden
}

Please advise :)

Thanks!

Share Improve this question edited Nov 19, 2018 at 12:07 asked Nov 19, 2018 at 11:28 dushkin 1033 bronze badges

which sidebar you mean the horizontal or vertical? what do you mean exactly with flickering? repeated shows and hides itself? – André Kelling Commented Nov 19, 2018 at 11:48
@AndréKelling The right one. Under the logo, with the first 3 blue buttons. Yes, when I scroll it hides and shows up very rapidly. I'll share a video clip in a minute. – dushkin Commented Nov 19, 2018 at 12:02
@AndréKelling Added: youtu.be/CM-tg5r8l1s – dushkin Commented Nov 19, 2018 at 12:07

Add a comment |

2 Answers 2

Sorted by: Reset to default 1

You would need to know since when / which change it starts flickering. // you said since the content change. So try to change back step by step until you know which content component exactly causes this.
Debug that change which caused that flickering.

There are playing a lot of factors in here: Theme, Theme CSS, Custom CSS, Theme JS, Widgets CSS and JS (maybe from another Plugin?) which make that unpredictable to give a correct answer. So just guessing.

I know it is only a workaround, but maybe it can help someone in the future...

I found out that changing to the SiteOrigin widgets was not the issue. As I started to remove several lines from the bottom of the original text based page, I reached a position where the sidebar stopped flickering and returned to be shown normally again.

So my work around was to add empty lines (eventually I need only 5 lines) after the new SiteOrigin buttons and problem was solved.

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1749167420a316930.html

pluginsFlickering sidebar when scrolling page

最新回复(0)