On mobile, iOS7 interferes with the closing of the lightbox

[nilnilnull]

When on mobile, if you open a lightbox and you try to close it by going for the X at the bottom left the bottom bar of the safari browser will appear and thus cover the X to close the lightbox.

[rictorres]

#36

[rictorres]

I'll try to make a PR for this very soon :)

[nilnilnull]

thank you!

[brutaldesign]

A fix for that would be nice! thx rictorres.

[networksolution]

Simply move the close button upper right will solve.

Dr. Marco Marsala
Network Solution
http://www.genovaperte.it (showing the problem)

[niggel84]

minimal-ui has been added for the viewport meta tag key that allows minimizing the top and bottom bars on the iPhone as the page loads. While on a page using minimal-ui, tapping the top bar brings the bars back. Tapping back in the content dismisses them again.

It is a new feature in iOS 7.1

It works!

[PhilippSchreiber]

@niggel84 and what about iOS 7.0?! That's not really a solution.

[niggel84]

@PhilippSchreiber yeah thats true...its a workaround

i think 90% (or more) of all apple users update their devices >= Iphone 4.

[networksolution]

Yes, it would be better to move the X upper right, but in the meantime this is an excellent workaround

[PhilippSchreiber]

Yeah alright, I'm one of the 10% ;)

Here is a working solution for moving the controls up and the caption down (including styling fixes with the borders):

#swipebox-action {
    top: -50px;
}

#swipebox-action.visible-bars {
    top: 0;
    border-top: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

#swipebox-caption {
    top: auto;
    bottom: -50px;
}

#swipebox-caption.visible-bars {
    top: auto;
    bottom: 0;
    border-bottom: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

[niggel84]

@PhilippSchreiber
yeah thx for this....but it is a little bit buggy.

1. title tag is behind the toolbar
2. if you start the swipebox with the "big" URL field --> see picture

[PhilippSchreiber]

@niggel84 you are right, I used an outdated version of swipebox for my fix. Here is a working css code for the current version:

#swipebox-action {
    top: -50px;
    bottom: auto;
    border-top: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

#swipebox-action.visible-bars {
    -webkit-transform: translateY(50px);
    -moz-transform: translateY(50px);
    -ms-transform: translateY(50px);
    -o-transform: translateY(50px);
    transform: translateY(50px);
}

#swipebox-caption {
    top: auto;
    bottom: -50px;
    border-bottom: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

#swipebox-caption.visible-bars {
    -webkit-transform: translateY(-50px);
    -moz-transform: translateY(-50px);
    -ms-transform: translateY(-50px);
    -o-transform: translateY(-50px);
    transform: translateY(-50px);
}

[niggel84]

@PhilippSchreiber
nice...it works perfect....thx :)