HTML5/Chrome: scrolling effect issue (background image)

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets
Post Reply
sval
Jr. Propeller Head
Posts: 2
Joined: Fri Jun 15, 2018 7:31 am

HTML5/Chrome: scrolling effect issue (background image)

Post by sval »

Hi all,

The scrolling effect applied using the background image in the Info-container section of the BALBOA template no longer works in Chrome.
I've noticed the problem two days ago on my online help portal.
So, I checked the Madcap site and the same goes for the BALBOA example:

https://madcappeteam.mcoutput.com/28772 ... t/Home.htm

The image of the bottom section is replaced with dark blue background.
Chrome is now in version 67.0.3396.87. It's still OK in Edge and Firefox.

Here's the CSS code in question (styleforhomepage.css):

/*Create the parallax scrolling effect*/
background-attachment: fixed;
background-position: center 0;
background-size: cover;
background-repeat: no-repeat;
background-image: url('../Images/Assets/HeroImages/image.png');
background-color: #000000;
}

Maybe an issue due to background-position or background-attachment?

Thanks
Psider
Propellus Maximus
Posts: 811
Joined: Wed Jul 06, 2011 1:32 am

Re: HTML5/Chrome: scrolling effect issue (background image)

Post by Psider »

I found this post on stackoverflow:
https://stackoverflow.com/questions/508 ... -chrome-67

tl;dr

Either add :
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);

or

position: static;

I couldn't comment on the side-effects of either option or the cross-browser consequences...
sval
Jr. Propeller Head
Posts: 2
Joined: Fri Jun 15, 2018 7:31 am

Re: HTML5/Chrome: scrolling effect issue (background image)

Post by sval »

Thank you for the link Psider.
Will try this.
Let's hope this issue is only btemporary and will be fixed with a next update...
Psider
Propellus Maximus
Posts: 811
Joined: Wed Jul 06, 2011 1:32 am

Re: HTML5/Chrome: scrolling effect issue (background image)

Post by Psider »

Good luck. Let us know how it goes. :)
Post Reply