0

I have a div with these styles

<div :class="$style.holder">
        <div :class="$style.inner" :style="{'background-position-x': bgPos + '%'}"></div>
    </div>

.holder {
    height: 60%;
    width: 100%;
    position: absolute;
    top: 40%;
    left: 0;
}
.inner{
    background-image: url('img.png');
    background-repeat: repeat-x;
    background-size: auto 100%;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 70%;
    transform: translateZ(1px);
}

I change bgPos or background position x of element every second with JS

this.bgPos += (now - lastTime) * (window.innerWidth / window.innerHeight)
lastTime = now;

The problem is that when screen is certain height (maybe around 896px and smaller) the image starts to move from left to right and when it is more than 896px is starts to move from right to left.

But the background-position-x parametrs for both situatuations is positive, so it is 100%, 120% etc.

I can't figure out why height affect the direction of the image movement this way?

Person
  • 2,190
  • 7
  • 30
  • 58
  • could you provide a jsfiddle or a pen? – Boussadjra Brahim Nov 07 '18 at 09:36
  • @BoussadjraBrahim https://jsfiddle.net/ch8ow063/ if you nake iframe where output is shown like 480px by 640px you will see that the image moves to the left. Bu tif you make height smaller it will move to the right – Person Nov 07 '18 at 10:04
  • So it is like the combination of width, height and maybe number by which the position increments – Person Nov 07 '18 at 10:06
  • i see also the speed changes when we resize, what's your use case, and what's the undesired effect? – Boussadjra Brahim Nov 07 '18 at 11:00
  • @BoussadjraBrahim yes speed changes, undesired effect is that the image moves in different directions. I can't even figure out why. If i remove width and height from the formula the problem still exists. – Person Nov 07 '18 at 11:14
  • @BoussadjraBrahim I think I found what is causing this - the size of background image. If the first value ```auto``` is changed to for exmaple 90% it doesn't change direction anymore – Person Nov 07 '18 at 11:41
  • but you didn't mention your use case or the desired behavior – Boussadjra Brahim Nov 07 '18 at 13:28
  • read the duplicate well and you will understand how background-position works and how the percentage value behave differently depending one sizes – Temani Afif Nov 07 '18 at 19:29

0 Answers0