Rich-text Reply

Sticky header not working on iPhone Safari

DarrellF 07-20-16

Sticky header not working on iPhone Safari

I'm trying to test how a sticky header would perform on our site, starting with just testing it on mobile. I have added the following code to my variation:

 

$("head").append("<style>@media all and (max-width: 768px) {.header-container .header {background: #242424; min-height: 110px; position: fixed; top: 0; margin-top:-3px; z-index: 999;}}</style>");

 

I tested this in the editor settings and loaded both android and iphone and it works fine; the header stays stuck to the top of the page when scrolling. I also tested it in the preview and resized my browser - worked fine.

 

However, when we started the experiment we were unable to see that variation on mobile safari for iPhone. Just to test I set the audience to 100% seeing the variation and I was able to see it working on Chrome for iPhone but not Safari.

 

I originally had an audience set up which only included iPhone and Other Mobile Phone but I have also tested with the audience being everyone (the media query should only allow on mobile devices anyway) and still the same result. I have cleared all browsing data and reloaded many pages but I just can't see the header sticking on safari for iPhone.

 

Is there something I'm missing?

Level 2

DarrellF 07-21-16
 

Re: Sticky header not working on iPhone Safari

Ok so I think I've found the problem. I tested it on multiple devices and it was only my own on which it wasn't working.

I tried and tried to find out what was causing it and finally got it to show by holding down the refresh button and reloading the page without content blocker.

It appears that, at least the content blocker I use (purify), stops optimizely from loading at all.

Does optimizely still count visitors with ad/content blockers to the statistics?

Level 2
Reneevl 07-21-16
 

Re: Sticky header not working on iPhone Safari

Hi there,

 

It might be possible that the Safari browser sometimes doesn't execute the media query correctly. I have seen examples online off this issue: http://stackoverflow.com/questions/15976751/safari-ignoring-css-max-width-media-queries-below-a-cert... and http://stackoverflow.com/questions/33411696/media-queries-not-working-in-safari. You might want your developer have a look at this.

In future I would highly advise you to use the force variation parameter as this is what your visitors would see when you are going live.

Read more about force variation parameter 

here: https://help.optimizely.com/QA_and_Troubleshoot/Force_a_specific_variation_to_run.

 

I hope this helps!

 

 

Renée van Leijen
Optimizely