Android 4.3 rotation CSS fix

[nastiatikk]

This is a CSS fix for Pinny's background-color and shade width when Android 4.3 is rotated from portrait to landscape. You can reproduce this bug on HTC (Android 4.3) and Samsung Galaxy S3 (Android 4.3).

I have tested it on different Android and iOS devices. It works everywhere but on Android 2.3 where Pinny doesn't work anyway.

HTC-broken:

HTC-fixed:

[scalvert]

Thanks for looking into this, @nastiatikk!

There's another pull request already open that addresses this issue.

Closing in favour of that one!

[wizardlyhel]

@scalvert This issue is a completely different bug than the PR you mentioned.

Issue #63 - PR https://github.com/mobify/pinny/pull/66 This issue is dealing with distorted pinny when changing orientation while the soft keyboard is visible

The issue described by @nastiatikk is pinny becomes distorted when changing orientation on Android.

[nastiatikk]

I've removed Shade CSS fix, as it refers to Shade plugin. Pinny's content fix is remained cause it belongs to Pinny.

To fix Shade on rotation we need to apply this CSS properties in Shade JS:

.android .shade.shade--is-open {
    right: -100% !important;
    bottom: -100% !important;
}

[wizardlyhel]

@nastiatikk We have several similar issues with Pinny and @scalvert wanted a more general way to fix them altogether.

We will explore your solution along with all other solutions that we have together.

[scalvert]

Going to close this in favour of a more generalized repaint for orientation change/keyboard shown/addressbar shown.