zurb/reveal — Issue #29: Horizontal scrollbar
Author: Wolfr
Created: 2011-10-16 15:51:57+00:00
State: open

Hey guys,

since reveal uses visibility: hidden instead of display: none (like many other modals), the element is rendered and takes up actual width. The default .reveal-modal width is 320px. If one makes a responsive design and tests it on a phone with 320px width, there's a 200px area on the side and you can "pan" the content.

My solution is disabling the modals for mobile:

@media all and (min-width: 220px) and (max-width: 480px) {
/* Fix reveal modal's width messing things up on iPhone https://twitter.com/meanlumberjack/status/125595270158360577 */
.reveal-modal {
width: auto !important;
}
}

and in the JS:

$('a[data-reveal-id]').live('click', function (event) {
if (($('body').width()) > 700) {
event.preventDefault();
var modalLocation = $(this).attr('data-reveal-id');
$('#' + modalLocation).reveal($(this).data());
};
});

Probably a better solution would to be to depend on display: none;

(This creates a new accessibility problem though)