I’m experiencing a strange behaviour with a div that has an image background, that is ‘absolute positioned’ with an inview animation applied. On occasion the animation gets stuck with the inline style “visibility: hidden” and the animation doesn’t proceed. then if i change the size of the browser window it appears. I’m not sure if there’s something in my CSS or the way i’m trying to use the animation is causing this.
I have another div overlapping it, that also has an image background but uses a “mix-blend-mode” with similar CSS but this one works fine. the only difference is this one has more delay.
This also happens to other divs using the same structure and position on the right side of the webpage. But with the same structures on the left side of the web page they work fine.
I’ve just discovered that it’s the “Right margin” that is applied to the div that is causing the problem. This is set to a “minus” value to position the div to the edge of the page. If i change it to margin left it resolves the issue.
Why would this cause a problem?
Can't really answer this question, without seeing your page in my browser. Probably something specific to it. Also you may want to play with the Start option and set it to something less than 100% visible.
OK thanks Teodor. Ill try what you suggested. I’ve only got this in a local testing environment currently. Could possibly change my Github repository to public if this helps.
… Cheers! 