When I pin an element, on mobile if I turn the phone from portrait to landscape then back, the css doesn't adjust

[LSchneiderman]

I have a video in my website that requires the user to click "play" to view it. I also have three items pinned to the screen--two are pinned from the start, but one is pinned once you scroll down to it.

 

On mobile, if you turn your phone from portrait to landscape (to view the video), then back to portrait, the css is messed up -- the two items pinned to the top and bottom of the screen centered horizontally are now pushed to the right. If I refresh the screen, things go back to where they're supposed to be. 

 

If I take out the element called "#portrait" that gets pinned when you scroll to it, then the other two pinned elements behave as they're supposed to, centered horizontally and pinned to the top and bottom of the screen no matter how the screen orientation changes.

 

It seems like any element that is pinned doesn't obey the css rules when the mobile phone orientation changes from portrait to landscape then back to portrait.

 

I am facing a deadline and am a bit stumped.  What is  causing this behavior and how can I fix it? Can anyone help?

 

I also have this problem at https://newsinteractive.post-gazette.com/.test/test.php.

See the Pen MYgqjOq by lschneiderman (@lschneiderman) on CodePen.

[LSchneiderman]

I just found my answer! 

 

[Rodrigo]

Hey, is great to know that you were able to get an answer 🥳

[GreenSock]

Did you try just updating to 3.12.7? 

[LSchneiderman]

Thanks, @Rodrigo!

@Jack I'll try to upgrade in a bit.