In Webkit based mobile browsers such as the native android browser the background overlaps the whole site because this CSS property seems badly supported: background-attachment: fixed;
I temporrily fixed it by checking if the device has more than 800px resolution and only then displaying the image (file: css/main-css.css)

@media screen and (min-width: 800px) {
    body.custom-background {background-image: url("../images/sampleimages/main-bg1.jpg"); background-repeat: no-repeat; background-position: top center; background-attachment: fixed;}
    }

Alternatively you can just remove 'background-attachment: fixed', but you will have an image that's scrolling.

Another issue I've found is the property overflow-x: hidden.
It will make the site non-scrollable horizontally and thus not readable in some mobile browsers. You can fix it by simply removing overflow-x: hidden from body in the same CSS file.

Comments

gtsopour’s picture

gtsopour CreditAttribution: gtsopour commented
Assigned: Unassigned » skech
Priority: Normal » Critical
Issue tags: +SimpleCorp responsive Drupal theme, +SimpleCorp theme

Thanks redthd for your suggestion. We will review it and this change will be committed and included in new SimpleCorp 7.x-1.1.

Thanks
George

prawln’s picture

prawln CreditAttribution: prawln commented

Any time frame on when 7.x-1.1 will be released? Having the same issue as skechagia which is quite major.
Doesn't seem like his work arounds have worked for me though.

pameeela’s picture

pameeela CreditAttribution: pameeela commented

Thanks @redthd, removing overflow-x: hidden fixed my iPhone issue. Is there any reason to keep this in? The site was not usable on iPhone with it because of the scroll problem. Fairly important fix for a responsive theme!

skech’s picture

skech CreditAttribution: skech commented
Status: Needs review » Fixed

Hi redthd,

thank you for reporting this. Seems that background-attachment: fixed; is badly supported on mobile devices.
We reviewed your suggestions and we removed the property overflow-x: hidden from line 38 of simplecorp/css/main-css.css file. Also we disabled the background-attachment: fixed; for mobile devices by adding the body.custom-background { background-attachment: scroll;} to

  • simplecorp/css/768.css
  • simplecorp/css/480.css
  • simplecorp/css/320.css

files

So with these changes the background image will not have the fixed behavior on mobile devices or when browser width goes below 959px.

These changes are committed http://drupalcode.org/project/simplecorp.git/commit/5f09615 and will included in the next release - SimpleCorp 7.x-1.1.

Thanks
Soukri

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

pheraph’s picture

pheraph CreditAttribution: pheraph commented

Thanks for the fix!