textillate icon indicating copy to clipboard operation
textillate copied to clipboard

Interfering with background images in chrome.

Open goosehub opened this issue 10 years ago • 3 comments

I tried to integrate textillate with my website. The animation worked, but on Chrome the background images no longer behaved correctly. They were stuck in place like regular images, and would jump after a bit of scrolling.

I stripped everything out of my website until I was left with just this standard textillate function

$(function () {
    $('#headline').textillate(
      { in: { effect: 'rollIn' } }
      );
    $('#sub-headline').textillate(
      { in: { effect: 'rollIn' } }
      );
  })

and this css of the element class with a background image

.emphasis-peekhole {
    padding: 0.5em 0 0.5em 0;
    border: 1px solid #888;
    border-radius: 1em 2em 2em 4em;
    font-family: BebasNeue, AveriaSerif-Regular, ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
    font-weight: bold;
    text-shadow: 0.05em 0.05em 0.05em #FFF;
    background: url('../resources/images/clouds.png') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

The problem persisted. My HTML is valid

Is this a known textillate issue?

goosehub avatar Jan 15 '15 23:01 goosehub

I also have the same issue with my site. Works fine in other browsers. It's a shame because it prevents me from using this sweet plugin.

brehouse avatar Jan 27 '15 22:01 brehouse

I actually left out the background images and kept the textillate, but for most cases, textillate would have to go. I hope someone can shine some light on the cause. I'll look into in the next project where I use textillate.

goosehub avatar Feb 01 '15 08:02 goosehub

Same problem here :( "background-position: fixed;" + "textillate" cause weird behaviour in Chrome.

dmitrijs avatar Nov 20 '15 22:11 dmitrijs