edswartz@yahoo.com

Thank you! Actually after your suggestions I changed the type face (for aesthetic reasons) but the real solution was to change the grid specifications from 'auto' to specific percentages. So I changed: grid-template-columns:auto; to: grid-template-columns:50% 50%; This keeps the parent divs a specific size and does not force it to recalculate the layout. Really appreciate all the help and suggestions.

Thank you for the quick response! So what's the best strategy to prevent the other divs from changing size when the span increases/decreases? Since all elements are in a css grid I don't think I can "fix" the dimensions of the parent element.

I have a scrambleText span that animates a series of words successfully. However, as it plays, a neighboring div (#homeHeader) vibrates. This happens across Chrome, Safari and their iOS versions. The divs are styled using css grid and media queries and are meant to sit side by side on landscape and vertically stacked on portrait queries. Note that this "vibration" doesn't happen all the time, but I can't identify what makes it vibrate exactly. I've tried to force reloading of cache on the browser but that does not seem to impact it. As stated above, I've tried across different browsers and different devices. I've tried fiddling with tweenLength, but the words are 4-6 characters long so I would not think it would impact the divs sizes that much. In fact, when I look at the divs in Chrome's devTools I don't see their size change at all. Let me know if you need anything else to try to troubleshoot.