Background cover issue when zooming in Safari / Mac OS X

Design help General
1

Hi, with this site here http://pragbits.webflow.com/, we set the header image as background with cover setting. When zoomed in Safari (pinch zoom), the image gets misplaced. We don’t know if this is a css issue in webflow, or a Safari problem. Could anybody delight us? Thank you!

The bigger problem is that zooming crashes Safari on older iOS devices. I suspect this will be a memory limit problem, we just don’t know yet what is causing it, the webflow javascripts or image sizes (the entire site is 750 kbytes, so I don’t think it is that)

2

Looks like it could be a Safari problem with all position:fixed; elements. Possible workarounds in the links below:

http://stackoverflow.com/questions/8019934/positionfixed-content-disappearing-on-zoom

http://stackoverflow.com/questions/8025818/unable-to-get-the-scroll-when-positionfixed-elements-disappears-form-the-scr/8026202#8026202

I tried to replicate on some of my sites with fixed elements, they all vanish upon pinch-zoom. (menus etc)

Istarted searching how to prevent the zoom but remembered it’s an accessibility tool and we shouldn’t mess with it (:

3

Not sure I understand the issue. I’m looking at your site in Safari on desktop and the background image is fixed. On my iPad the image isn’t fixed (expected result) and pinch zoom works without issue.

4

Here is what happens when I zoom in in Safari on desktop:

1364×678 214 KB

5

It took me a while to get it… I did pinch zoom on iphone before re reading the title stationg OS X. So he is refering to the trackpad… pinch zoom on the track pad.

Edit: or zoom with menu

6

@vincent Hmmm. Just and and issue with Trackpad? It zooms fine on desktop using keyboard shortcuts or menu.

7

As I have a trackpad close to my iMac I just pinched and didn’t test with menu. I will… I’m on mobile right now.

8

I have noticed crashing when using pinch zoom on Webflow sites on my older (iPad MD328LL/A) running iOS 8.1.3 (12B466). I need to test on a variety of simpler sites. Webflow.com works fine BTW.

Your site appears fairly lightweight overall but crashes pretty hard on pinch zoom followed by any attempt to scroll. I wonder if it could possibly be an issue with the Google map embed (it is common to both of the sites). It might be worth stripping a copy of the site down for the obvious chunks section by section removing embeds / fixed images, etc. and doing a quick publish and test.

Does anyone know if there is a crash log on iOS? Or on the Safari Inspector when it is connected to a computer? Not sure how to test.

On desktop in safari if I double tap to zoom I get the weird misalignment on the fixed image ( an inverse parallax like scroll on panning), but no crash.

9

Thanks for everyone’s input, the problem was the fixed property as shown here:

.herosection {
  height: 750px;
  background: url('../images/bg-header.jpg') no-repeat center center fixed;
  background-size:cover;    
}

Removing the fixed property solved the zoom on mac (with trackpad) issue.

1 Like
10

Did you have any luck with eliminating the crash on mobile / iOS? The site is offline now so I have not been able to check.

11

No, the crash on iOS devices is still an issue when zooming. This must be related with the parallax javascript effect but now only happens on mobile at least. The site is at www.pragbits.com

12

I will turn off the parallax on small screens anyway.

13

For me it only slows down and gets buggy when I am over the google map embed when zoomed on iOS (iPad). The balance of the page works OK. When I get to the map, you see a notable performance hit and if I pan the page around, eventually a crash.

I agree on the parallax for mobile, definitely could be contributing or entirely be the issue.