[Solved] Problem with translateX on iOS

[Steven Gardner]

Hi,

I have designed a WordPress theme (Eryn) that uses TranslateX to slide in & out the search/Navigation panels. Everything works fine on most browsers and devices except portrait view on iPad Mini (780 x 1024). On this view the panels are expanded by default. Debugging is hard because it works fine on desktop browsers.

Can you take a quick look and let me know if you spot anything obvious that I can fix. I’m tearing my hair out with this.

Here is the demo site for reference:

http://www.templateexpress.com/eryn

[Shikkediel]

Does it only happen on portrait view? Looks like it’s missing the CSS prefix at least – adding -webkit-transform: translateX(100%) on line 909 of style.css should generally solve it.

[Senff]

It actually works fine on iPhone (both Safari and Chrome) so I’m not sure if you already fixed it.

Having said that, there seems to be a typo on line 1651 of style.css:

-webkit-transform: translatX(-100%);

Should be:

-webkit-transform: translateX(-100%);

[Shikkediel]

Nice catch. But how very odd, I see the CSS I mentioned before in the stylesheet but it’s not showing in dev tools (like it usually would).

Edit – must be a new thing on Firefox (not an improvement, I think).

[Senff]

I see it: https://cloudup.com/cmHPPfrfoWn

[Shikkediel]

Yes, but not a stricken out webkit prefixed rule anymore like there used to be (while it’s there in the stylesheet)…

[Senff]

Oh! You mean it’s just not visible in the debugger, instead of being visible with strikethrough. Yea that’s kinda weird.

“Firefox: Not Improving Since 2011!”

[Steven Gardner]

Brilliant!

Thanks So much for taking the time to look at this and pick up on a spelling error. I’ve been looking at this so long I never spotted it.

What a relief!

Thanks again!!

Steven :)

[Author]

Posts