Overflow text does not work in Chrome

Hello everyone!

I am developing a site and I have problems with text put in “overflow”.
There are four text sentences that appear in the same position and become visible according to their corresponding div.
In safari it works perfect, but in chrome and firefox they don’t work.

Sample video links of how it looks in Safari and how it looks in Chrome.
Test Safari
Test Chrome

I need your help! please!!!
Thank you!

Here is my site Read-Only: https://preview.webflow.com/preview/rodrigolancioni?utm_medium=preview_link&utm_source=designer&utm_content=rodrigolancioni&preview=70afc2f99737a829f3aa7bce9785bf40&mode=preview
(how to share your site Read-Only link)

Hey Rodrigo! Hope you’re doing well. :grin:

I took a look at your website and I found a thread with a similar issue from another Webflow User.

As per @cyberdave + @Waldo in that thread, it looks to be a rendering issue and that the overflow: hidden property isn’t supported well on fixed items (such as your text/headings):

I’m not sure if that overflow: hidden property is supported like that for fixed items (it’s a lot of repainting for the browser to do on scroll and is super heavy on CPU’s).

I think Dave’s solution in that thread would be the best for you - instead of using items/headings with a fixed position, try recreating the effect you like with interactions! It’s easier to maintain and will likely create a better experience for you in the designer, as you don’t have all these headings that stack on top of each other.

Hope that helps - feel free to write back with any questions/comments/concerns!

Thanks for your reply mattvaru! It has been helpful :ok_hand::ok_hand:
I will look at it!

1 Like