Fictive – Theme jumps to the top on any device when sized

  • brianrluedtke · Member ·

    I have a problem with Fictive that concerns the header (I think) on mobile sizes.

    When viewing my site on a mobile, Fictive automatically resizes to fit the screen. This is really handy and I love the way it looks, however there is a problem with scrolling with it. Whenever the page is opened, or when a new article is loaded, the browser must return to the top of the page. This appears to be a reaction of the header being initially sized for the page or article.

    When you attempt to scroll down the page for the first time, the address bar hides as per the browser’s set up. When it does, the header is then repositioned on the page and the entire page or article jumps to the top again.

    Scrolling then works as intended if you continue down the article since nothing more will be resized or moved. However, if you attempt to scroll up the article will immediately jump to the top again, losing your place. This happens because any other action than scrolling down causes the address bar in the browser to reappear, and thus the header is repositioned or resized.

    This is also happening on the desktop version of any browser I use, Chrome, Firefox, Internet Explorer, etc, whenever the window pane is resized to allow the “mobile” format to kick in. Anything other than the full page view has this bug.

    It seems that the reduced and condensed format requires the header to be repositioned. As long as the header is not adjusted beyond that point, everything is fine. However, if a menu, address bar, or other element appears, the header is slightly resized (or moved) and the entire page jumps to the top.

    I dug through the code and can not find any CSS settings I could add to remove this behavior. I think it may be within the javascript’s method of handling a floating header, but I am not sure.

    I can provide video if this is not clear. I will leave the mobile version of the theme enabled for troubleshooting.

    Thank you in advance.

    The blog I need help with is: (visible only to logged in users)

  • timethief · Member ·

    Just in case you have failed to disable the mobile theme go to > Appearance > Mobile and do that now. The mobile theme is a completely different theme. Know that responsive layout means the layout adapts depending on the size of the device being used to view your site. When responsive width themes are viewed on mobiles sidebars appear below the posts in order to provide as much space as possible for reading.

    I’ll tag this thread for a Themes Staff follow-up. Please subscribe to the thread so you are notified when they respond and please be patient while waiting.

  • brianrluedtke · Member ·

    Thank you for your reply. The mobile theme is disabled and everything is running with Fictive. The only CSS edits are: 

    .entry-content {
	color: black;
}

.site-description {
	color: black;
}

    This issue existed prior to these edits.

  • timethief · Member ·

    Thanks so much for the added information and please be patient while waiting for a Staff response.

  • jeremeylduvall · Member ·

    Hey Brian,

    Thanks for the report. I tested this out on an iPhone 5 on Safari and through the Customizer in Google Chrome. My experience didn’t match what you’re describing. The scrolling up and down seemed to work correctly (I didn’t get automatically routed to the top). I’ve created a screencast of my experience:

    This is in the Customizer in Chrome, but I experienced the same thing on my mobile browser.

    Can you let me know if this is similar to what you’re describing or if I’m incorrectly attempting to reproduce the error?

  • alhefzi · Member ·

    I’m having the same issue, couldn’t find out any fix for the responsive version, it works fine with desktop version!

    Looking forward to hearing any fix for this!

  • alhefzi · Member ·

    I’ve recorded my Android screen and upload it here:
    http://youtu.be/v84JJbQfLjo

    Note that whenever I regularly browse the screen jumps to top many times, sometimes it even got stuck!

    Any guidance?!

  • brianrluedtke · Member ·

    Here is a link to my Google Drive folder with two videos.

    FictiveDesktop.wmv was done on a Windows 7 PC with Chrome. Once a window is resized and the jump happens, everything is fine until the window is resized again.

    FictiveMobile.mp4 was done on a Samsung S4 running Android 4.4 using Chrome. Whenever a screen element appears, the window jumps.

    https://drive.google.com/folderview?id=0B8ABh_8jhgRpc3NfbjZoaEJ1TEE&usp=sharing

  • brianrluedtke · Member ·

    Here are the same videos on YouTube. Figure that’s easier to deal with.

    Mobile: http://youtu.be/8_ei2zpFafk
    Desktop: http://youtu.be/97VmK0nFWqU

    The Drive files can be made available if requested.

  • jeremeylduvall · Member ·

    Brian and @alhefzi – I was able to reproduce this issue in Chrome. I was previously testing in Safari on an iPhone 5, where the issue doesn’t appear to be occurring. I’ll report this to our theme developers and let you know as soon as I know more!

  • brianrluedtke · Member ·

    Thank you very much!

  • guertzen · Member ·

    Hi,
    Any news about this issue?

    Thanks.

  • jeremeylduvall · Member ·

    Hi there,

    Not yet! I’ll update this thread as soon as this is resolved.

  • mostlyvirtual · Member ·

    Hello,

    I downloaded Fictive today and that jump to the top was really bugging me.
    I dug around through the files and in public_html/wp-content/themes/fictive/js/fictive.js I found this code:

    //Scroll past header image on screen widths less than 820px
    $.fn.scrollDown = function() {
    $( ‘body,html’ ).animate( {
    scrollTop: $scrollPosition
    }, 400 );
    };

    I though this is the culprit, so I disabled it by adding // in front of the code like this:

    //Scroll past header image on screen widths less than 820px
    // $.fn.scrollDown = function() {
    // $( ‘body,html’ ).animate( {
    // scrollTop: $scrollPosition
    // }, 400 );
    // };

    The issue is gone now.
    My javascript skills are very low, so I am not sure where the error is, or if the function is simply faulty, but it’s not really necessary to be honest.
    I’d rather have a functioning site.

    By the way, this was happening in Chrome for Android.

    Regards,

    Claudiu

  • brianrluedtke · Member ·

    This is what I found as well. There’s no way to disable it on a WordPress hosted site, though, unless I’m missing something.

  • jeremeylduvall · Member ·

    Hey Brian,

    You’re correct – you won’t be able to edit the theme files outside of the style.css at WordPress.com so you will not be able to implement this fix. I’ll let you know as soon as this is fixed on the WordPress.com side!

  • markavilla · Member ·

    Hello,

    I am also having the same issue on my WordPress hosted site with mobile devices. I really like the theme, and even viewing it on a mobile device looks great, minus this issue.

    I’ll be patiently waiting for a fix. Thanks so much!

  • brianrluedtke · Member ·

    It’s been a month and I wanted to check in on this. I haven’t heard of any work arounds or solutions yet. Is this still being looked in to?

  • jeremeylduvall · Member ·

    Hey Brian – sorry for the delay. I just went back and tested the Fictive theme. I was unable to recreate the issue so it looks like it might be fixed. Could you give it a try on your side and let me know what you experience?

  • brianrluedtke · Member ·

    It still jumps for me on resize. On desktop it happens on any resize that changes the shape of it’s compact layout. On Android it seems to only happen once when the page loads and again if new content is loaded (infinite scroll?), but it can be resized without jumping.

1 2
  • The topic ‘Fictive – Theme jumps to the top on any device when sized’ is closed to new replies.