Parallax Flickering Issue

ColoradoWebGuy commented 6 years ago

Prerequisites

[X] Put an X between the brackets on this line if you have done all of the following:
- Can you reproduce the problem on a fresh install or the demo site?
- Did you include your Rock version number and client culture setting?
- Did you perform a cursory search to see if your bug or enhancement is already reported?

Description

Noticed a few defects with the new parallax from this short-code:

{[ parallax image:'http://cdn.wonderfulengineering.com/wp-content/uploads/2014/09/star-wars-wallpaper-4.jpg' speed:'0.2' height:'400px' position:'top' contentpadding:'20px' ]}
    <h1>Hello World</h1>
{[ endparallax ]}

The main issue is that there's a flickering problem when scrolling; here's a video to show what I was seeing. This was tested in Google Chrome, Safari, and Firefox from an Apple Macbook Pro. Additionally, it was tested under the prealpha site (here's a video for that too). All I did was I added <div style="background-color:#333"><br /></div> before the shortcode to see the flicker.

The second issue is that the parallax turns into just a static image on mobile. In a way, this is fine, but I wished it would've acted the same as it did on desktop. At least from a designers perspective, and to keep the consistency.

Lastly, I wasn't sure I really liked the defined height option without any content. If it's 400px on desktop, then it's 400px on mobile (really long).

To fix these things, I personally think you need to update the parallax short-code, and go with a different javascript library, Jarallax. Jarallax not only fixes these issues, but it also has additional features such as parallaxing videos, and elements!

Below is a new custom short-code I've made (working), and I've only got a small amount of everything that Jarallax could offer so far. Attached is also a screenshot of all the other lava details that went with it.

Jarallax Shortcode

{[ jarallax image:'http://cdn.wonderfulengineering.com/wp-content/uploads/2014/09/star-wars-wallpaper-4.jpg' position:'top' height:'350px']}
{[ endjarallax ]}
OR
{[ jarallax video:'true' videourl:'https://youtu.be/W4CB5SeBGkI' height:'400px']}
{[ endjarallax ]}

Shortcode Markup

{{ 'https://cdnjs.cloudflare.com/ajax/libs/jarallax/1.9.2/jarallax.min.js' | AddScriptLink }}
{% if videourl != '' %}
    {{ 'https://cdnjs.cloudflare.com/ajax/libs/jarallax/1.9.2/jarallax-video.min.js' | AddScriptLink }}
{% endif %}

{% assign id = uniqueid %} 
{% assign bodyZindex = zindex | Plus:1 %}

{% if videourl != '' %}
    <div id="{{ id }}" class="jarallax" data-jarallax-video="{{ videourl }}" data-type="{{ type }}" data-speed="{{ speed }}" data-img-position="{{ position }}" data-object-position="{{ position }}" data-background-position="{{ position }}" data-zindex="{{ bodyZindex }}" data-no-android="{{ noandroid }}" data-no-ios="{{ noios }}">
        {{ blockContent }}
    </div>
{% else %} 
    <div id="{{ id }}" data-jarallax class="jarallax" data-type="{{ type }}" data-speed="{{ speed }}" data-img-position="{{ position }}" data-object-position="{{ position }}" data-background-position="{{ position }}" data-zindex="{{ bodyZindex }}" data-no-android="{{ noandroid }}" data-no-ios="{{ noios }}">
        <img class="jarallax-img" src="{{ image }}" alt="">
        {{ blockContent }}
    </div>
{% endif %}

{% stylesheet %}
#{{ id }} {
    /* eventually going to change the height using media queries with mixins using sass, and then include only the classes I want for certain parallaxes */
    min-height: {{ height }};
    background: transparent;
    position: relative;
    z-index: 0;
}

#{{ id }} .jarallax-img {
    position: absolute;
    object-fit: cover;
    /* support for plugin https://github.com/bfred-it/object-fit-images */
    font-family: 'object-fit: cover;';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
{% endstylesheet %}

Everything else

lava shortcode detail rock rms 1

Steps to Reproduce

Add an HTML block into any rock page.

Insert this short-code:

<div style="background-color:#333">
<br />
<br />
<br />
</div>
{[ parallax image:'http://cdn.wonderfulengineering.com/wp-content/uploads/2014/09/star-wars-wallpaper-4.jpg' contentpadding:'20px' ]}
<h1>Hello World</h1>
{[ endparallax ]}

Then hit save, and you'll see the flickering issue when scrolling on desktop.

Expected behavior:

No flickers. Parallax on mobile.

Here's a video of a working parallax using Jarallax.

Additionally, here's a video of a video parallax.

Actual behavior:

It flickers. As I've mentioned before, here's a video to show what actually happens.

Versions

Rock Version: [Rock McKinley 7.0 - Build #216]
Client Culture Setting: [en-US]

jonedmiston commented 6 years ago

@ColoradoWebGuy thanks for the note. Jarallax looks promising. Wish it had more stars on Github, but that's not a huge deal. Took a little tweaking to get content to look right, but I think with some changes we could make that simple. The goal of these shortcodes is to get great results from people who may not know much about CSS/Javascript.

I'll keep playing with this a bit and if everything goes well we'll switch out the current library with Jarallax.

ColoradoWebGuy commented 6 years ago

@edmistj Sounds great – thanks for looking into it.

arranf commented 6 years ago

This appears to have been implemented.

SparkDevNetwork / Rock