Some images w/ y-offset have a strange overlap/cutoff

[edgrbnz]

Sorry, I forgot to link the site in my initial post. It’s happening on this site and the projects are the latest two (tape and hoodie) on the front page.

[Richard]

Dear @edgrbnz

Thank you so much for such a good Bug Report! 🐛

• Bug Present in Chrome & Safari (Lay Theme version 4.1.5, 4.1.6)
• Last element with negative Y-Offset applied
• Element is cut off (confirmed when removing Offset):

Relates to Code:

body.lay-transition-elements-on-scroll .row:last-child {
    overflow: hidden;
}

• Bug Present EXAMPLE-1 , EXAMPLE-2
• Also recreated on Test Site

---

Have forwarded to Armin ✅

---

Thanks @edgrbnz & have a wonderful day 🏖

Richard

[edgrbnz]

Hey @Richard,

any news on this?

[Richard]

Have re-forwarded it @edgrbnz 👍

[edgrbnz]

Thank you @Richard, hope there’ll be a fix soon 🎉

[edgrbnz]

Hey @Richard & @arminunruh any news?

[Richard]

Dear @edgrbnz

Still no news sorry, lets come to a solution in the meantime then 👍

This is affecting the last child in the Gridder. This custom CSS with change the overflow:hidden. I have added translateY to move it down a bit if needed for your design.

Here on the "friends-act-like-this-over-here" work page:

I didnt need to move the element down because you had room above within the design:

body.lay-transition-elements-on-scroll .row:last-child {
    overflow: initial !important;
}

If you do need to push an element you can use the code below to push it down (for example 70px):

body.lay-transition-elements-on-scroll .row:last-child {
    overflow: initial !important;
    transform: translateY(70px);
}

Im sure there are different setups for different pages so let me know how i can help if you find the above code not working as per design. Once again sorry for no reply, i will re-forward. ✅

Talk soon & let me know if i can help further 🌝

Sincerely
Richard

[edgrbnz]

Dear @Richard,
thanks a lot!!

body.lay-transition-elements-on-scroll .row:last-child {
    overflow: initial !important;
}

👆 Did the trick for now.
Please let me know as soon as there is an official fix / update for that.

Cheers! 💐

[Richard]

Thanks @edgrbnz will do! 👍

[qua7]

Hi @richard & @arminunruh,

just discovered that the two last images in one project were cut off at the top as well. The strange thing is that this only happened in one project.

body.lay-transition-elements-on-scroll .row:last-child {
overflow: initial !important;}

did the trick for me, too.

Once there is a fix for this: do I then have to remove that custom CSS?

Thanks!

[Richard]

Dear @qua7

Thanks for your update and adding to the thread 👍
Yes, once the Bug is fixed properly the Custom CSS can be removed.

---

Have a wonderful weekend @qua7

Richard

[arminunruh]

hey!

i had to do overflow hidden on the last row because otherwise this bug happened:
http://laythemeforum.com:4567/topic/6980/full-screen-row-getting-smaller-on-scroll

the overflow is only hidden when you use "animate elements on scroll" and you use a y-offset in the last row.

since this is kind of a rare case and im not sure how else to fix the bug that i mentioned in the first sentence, i will leave it as it is.

[edgrbnz]

Alright thanks @arminunruh I had this issue on another site I’m currently working on. Will there be a fix somewhen in the forseeable future?

[arminunruh]

hey man,

im gonna code the fix now :O
will be included with the next update

[arminunruh]

should be fixed if you update now

[edgrbnz]

Thank you @arminunruh 🙏