Aside background won't load when scrolling on mobile site

Question

The background of the <aside> on my website has a grey background. When I access the site from a mobile device and press the menu button, the menu background displays fine, but when I scroll down the page the background only partly refreshes, leaving transparency for roughly the lower half of the aside.

Note: The site uses bigcartel, so the code I am editing does not match up exactly with the code read from the live site.

I followed Praveen's instruction left in the comments:

Remove the height: 100% from aside {} Line no. 757 in theme.css

The result is that the page stopped attempting to refresh the background, and the area it filled remained fixed as the page was scrolled.

Here is the CSS for the <aside>.

aside {
  background-color: {{ theme.sidebar_color }};
  float: left;
  padding: 57px 30px 0;
  position: {% if theme.fixed_sidebar %} fixed {% else %} absolute {% endif %};
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
  transform: translateZ(0);
  width: 209px;
  z-index: 100;
}
@media screen and (max-width: 765px) {
  aside {
    border-right-color: {{ theme.sidebar_border_color }};
    border-right-style: solid;
    border-right-width: 1px;
    min-height: 100%;
    padding: 0 32px;
    position: absolute;
    width: 272px;
    z-index: 1;
  }
}

This was existing CSS in the template. The following is an additional class which I added to the end of the stylesheet:

aside {
    -webkit-box-shadow: 0 0 24px 3px rgba(255,255,255,0.6), inset -7px 9px 20px -7px rgba(0,0,0,1);
    -moz-box-shadow: 0 0 24px 3px rgba(255,255,255,0.6), inset -7px 9px 20px -7px rgba(0,0,0,1);
  box-shadow: 0 0 24px 3px rgba(255,255,255,0.6), inset -7px 9px 20px -7px rgba(0,0,0,1);
}

I have added a screenshot showing the updated result.

EDIT:

I tried the solution recommended by Praveen in the comments. However, removing height: 100%; from the <aside> container did not provide a solution.

The background colour would fill the area which was originally visible on the site when the page loaded but, when scrolling, the background colour would not re-appear and the page did not attempt to refresh it so the portion of the container which loaded off-screen was transparent.

I then tried replacing height: 100% with min-height: 100% and it appears to have worked. Now, when I scroll down the page on a mobile site, the background colour is filled seamlessly except where the page height exceeds <html>.

EDIT:

I have cleaned up the code. Attempted to push <cite> to the bottom. Attempted altering margins and padding of containers. Attempted to alter margins and padding of cite in order to force <aside> to extend to the bottom of the page. Some results succeed when viewing from a narrow browser, but I am unable to find any solution which succeeds when viewing from a mobile device. I have been testing using an Alcatel One Touch Pop as well as Chrome's mobile viewer. None of these display properly in portrait, however landscape view shows no error.

Remove the `height: 100%` from `aside {}` Line no. 757 in `theme.css`. — Praveen Kumar Purushothaman, Dec 24 '15 at 21:41
Hi Praveen. No, the solution did not work. It appears to get me further from the correct answer. Now, instead of trying to refresh, the background simply fills out the original page size and when I scroll it doesn't even attempt to refresh the background, it is just cut off where the original screen size ends. I will update the question now to show the result. — Muckee, Dec 25 '15 at 10:25
I tried reproduce this error and I wasn't able, i used firefox + smartphone view, and android + iphone 5 device and I see nothing bad — Rodney Salcedo, Dec 27 '15 at 03:17
@Rodney I just spent a while playing with different settings on my browser to see where the error occurs. It seems that the error will occur when the resolution only permits the image tiles on the homepage, for example, to be stacked vertically in a single column. I believe this is because the container for those items then exceeds the original page height, however the `
` height is still set to the original. At least that is what appears to happen when observing graphically. — Muckee, Dec 27 '15 at 11:29
I've removed the link to your site - in general these are discouraged, since once the issue at hand has been fixed, it is not useful for future readers who will look for a problem that is no longer there. [This post](https://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it) is useful reading, though this question after several edits does include a good deal of useful information in the body of the question itself. — halfer, Dec 30 '15 at 19:42
Thank you @halfer for the help! I'll read through and take this into account on future posts! — Muckee, Jan 15 '16 at 17:01

Muckee · Accepted Answer · 2015-12-27T16:20:57.123

0

I had to remove the height: 100% attribute from .aside and replace it with min-height: 100%;. Initially this did not solve the problem.

I also had to remove height: 100%; from .wrapper. The wrapper also had the min-height: 100%; attribute already attached, which I did not remove. It appears to have solved the problem.

edited Dec 27 '15 at 16:20

answered Dec 26 '15 at 11:01

Muckee

474
1
8
26

Aside background won't load when scrolling on mobile site

1 Answers1