minsoochoo/phorge
minsoochoo/phorge
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Improve scrolling behavior for lightboxes in Safari

Browse source 
Summary: Our "html { overflow-y: scroll; }" makes Safari flip out when we put "hidden" on body. Instead, put the scroll on `body` and then replace it with `hidden` when the lightbox is visible.

Test Plan: In Safari, the body scrollbar vanishes when the lightbox is active and scrolling no longer causes spasms.

Reviewers: btrahan

Reviewed By: btrahan

CC: aran

Differential Revision: https://secure.phabricator.com/D3800
This commit is contained in:
epriestley 2012-10-23 12:00:37 -07:00
parent 70dc3f5004
commit 4596e3876b
4 changed files with 39 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
src/__celerity_resource_map__.php
View file

@ -1385,7 +1385,7 @@ celerity_register_resource_map(array(
), ),
'javelin-behavior-lightbox-attachments' => 'javelin-behavior-lightbox-attachments' =>
array( array(
'uri' => '/res/0cfebd8a/rsrc/js/application/core/behavior-lightbox-attachments.js', 'uri' => '/res/6ddb05f8/rsrc/js/application/core/behavior-lightbox-attachments.js',
'type' => 'js', 'type' => 'js',
'requires' => 'requires' =>
array( array(
@ -2237,7 +2237,7 @@ celerity_register_resource_map(array(
), ),
'lightbox-attachment-css' => 'lightbox-attachment-css' =>
array( array(
'uri' => '/res/136d479b/rsrc/css/aphront/lightbox-attachment.css', 'uri' => '/res/b931ca15/rsrc/css/aphront/lightbox-attachment.css',
'type' => 'css', 'type' => 'css',
'requires' => 'requires' =>
array( array(
@ -2396,7 +2396,7 @@ celerity_register_resource_map(array(
), ),
'phabricator-core-css' => 'phabricator-core-css' =>
array( array(
'uri' => '/res/6710c9ba/rsrc/css/core/core.css', 'uri' => '/res/768cc6eb/rsrc/css/core/core.css',
'type' => 'css', 'type' => 'css',
'requires' => 'requires' =>
array( array(
@ -3070,7 +3070,7 @@ celerity_register_resource_map(array(
), array( ), array(
'packages' => 'packages' =>
array( array(
'4322f368' => 'a4d32081' =>
array( array(
'name' => 'core.pkg.css', 'name' => 'core.pkg.css',
'symbols' => 'symbols' =>
@ -3099,7 +3099,7 @@ celerity_register_resource_map(array(
21 => 'phabricator-flag-css', 21 => 'phabricator-flag-css',
22 => 'aphront-error-view-css', 22 => 'aphront-error-view-css',
), ),
'uri' => '/res/pkg/4322f368/core.pkg.css', 'uri' => '/res/pkg/a4d32081/core.pkg.css',
'type' => 'css', 'type' => 'css',
), ),
'f5ccc73b' => 'f5ccc73b' =>
@ -3266,20 +3266,20 @@ celerity_register_resource_map(array(
'reverse' => 'reverse' =>
array( array(
'aphront-attached-file-view-css' => '7839ae2d', 'aphront-attached-file-view-css' => '7839ae2d',
'aphront-crumbs-view-css' => '4322f368', 'aphront-crumbs-view-css' => 'a4d32081',
'aphront-dialog-view-css' => '4322f368', 'aphront-dialog-view-css' => 'a4d32081',
'aphront-error-view-css' => '4322f368', 'aphront-error-view-css' => 'a4d32081',
'aphront-form-view-css' => '4322f368', 'aphront-form-view-css' => 'a4d32081',
'aphront-headsup-action-list-view-css' => '2ba14b3d', 'aphront-headsup-action-list-view-css' => '2ba14b3d',
'aphront-headsup-view-css' => '4322f368', 'aphront-headsup-view-css' => 'a4d32081',
'aphront-list-filter-view-css' => '4322f368', 'aphront-list-filter-view-css' => 'a4d32081',
'aphront-pager-view-css' => '4322f368', 'aphront-pager-view-css' => 'a4d32081',
'aphront-panel-view-css' => '4322f368', 'aphront-panel-view-css' => 'a4d32081',
'aphront-side-nav-view-css' => '4322f368', 'aphront-side-nav-view-css' => 'a4d32081',
'aphront-table-view-css' => '4322f368', 'aphront-table-view-css' => 'a4d32081',
'aphront-tokenizer-control-css' => '4322f368', 'aphront-tokenizer-control-css' => 'a4d32081',
'aphront-tooltip-css' => '4322f368', 'aphront-tooltip-css' => 'a4d32081',
'aphront-typeahead-control-css' => '4322f368', 'aphront-typeahead-control-css' => 'a4d32081',
'differential-changeset-view-css' => '2ba14b3d', 'differential-changeset-view-css' => '2ba14b3d',
'differential-core-view-css' => '2ba14b3d', 'differential-core-view-css' => '2ba14b3d',
'differential-inline-comment-editor' => '8136e4a6', 'differential-inline-comment-editor' => '8136e4a6',
@ -3345,15 +3345,15 @@ celerity_register_resource_map(array(
'javelin-workflow' => 'f5ccc73b', 'javelin-workflow' => 'f5ccc73b',
'maniphest-task-summary-css' => '7839ae2d', 'maniphest-task-summary-css' => '7839ae2d',
'maniphest-transaction-detail-css' => '7839ae2d', 'maniphest-transaction-detail-css' => '7839ae2d',
'phabricator-app-buttons-css' => '4322f368', 'phabricator-app-buttons-css' => 'a4d32081',
'phabricator-content-source-view-css' => '2ba14b3d', 'phabricator-content-source-view-css' => '2ba14b3d',
'phabricator-core-buttons-css' => '4322f368', 'phabricator-core-buttons-css' => 'a4d32081',
'phabricator-core-css' => '4322f368', 'phabricator-core-css' => 'a4d32081',
'phabricator-directory-css' => '4322f368', 'phabricator-directory-css' => 'a4d32081',
'phabricator-drag-and-drop-file-upload' => '8136e4a6', 'phabricator-drag-and-drop-file-upload' => '8136e4a6',
'phabricator-dropdown-menu' => 'f5ccc73b', 'phabricator-dropdown-menu' => 'f5ccc73b',
'phabricator-flag-css' => '4322f368', 'phabricator-flag-css' => 'a4d32081',
'phabricator-jump-nav' => '4322f368', 'phabricator-jump-nav' => 'a4d32081',
'phabricator-keyboard-shortcut' => 'f5ccc73b', 'phabricator-keyboard-shortcut' => 'f5ccc73b',
'phabricator-keyboard-shortcut-manager' => 'f5ccc73b', 'phabricator-keyboard-shortcut-manager' => 'f5ccc73b',
'phabricator-menu-item' => 'f5ccc73b', 'phabricator-menu-item' => 'f5ccc73b',
@ -3361,11 +3361,11 @@ celerity_register_resource_map(array(
'phabricator-paste-file-upload' => 'f5ccc73b', 'phabricator-paste-file-upload' => 'f5ccc73b',
'phabricator-prefab' => 'f5ccc73b', 'phabricator-prefab' => 'f5ccc73b',
'phabricator-project-tag-css' => '7839ae2d', 'phabricator-project-tag-css' => '7839ae2d',
'phabricator-remarkup-css' => '4322f368', 'phabricator-remarkup-css' => 'a4d32081',
'phabricator-shaped-request' => '8136e4a6', 'phabricator-shaped-request' => '8136e4a6',
'phabricator-standard-page-view' => '4322f368', 'phabricator-standard-page-view' => 'a4d32081',
'phabricator-tooltip' => 'f5ccc73b', 'phabricator-tooltip' => 'f5ccc73b',
'phabricator-transaction-view-css' => '4322f368', 'phabricator-transaction-view-css' => 'a4d32081',
'syntax-highlighting-css' => '4322f368', 'syntax-highlighting-css' => 'a4d32081',
), ),
)); ));

13
webroot/rsrc/css/aphront/lightbox-attachment.css
View file

@ -2,21 +2,24 @@
* @provides lightbox-attachment-css * @provides lightbox-attachment-css
*/ */
.lightbox-attached { .lightbox-attached {
height: 100%; overflow: hidden;
overflow-y: hidden;
} }
.lightbox-attachment { .lightbox-attachment {
position: fixed; position: fixed;
top: 44px; top: 0;
left: 0; left: 0;
bottom: 0;
right: 0;
z-index: 12; z-index: 12;
width: 100%; overflow-y: auto;
} }
.lightbox-attachment img { .lightbox-attachment img {
margin: 12px auto 0px auto; margin: 50px auto 0;
} }
.lightbox-attachment .loading { .lightbox-attachment .loading {

2
webroot/rsrc/css/core/core.css
View file

@ -3,7 +3,7 @@
*/ */
html { body {
/* Always show the vertical scrollbar so that going from a page without a /* Always show the vertical scrollbar so that going from a page without a
scrollbar to a page with a scrollbar doesn't make content jump a few scrollbar to a page with a scrollbar doesn't make content jump a few
pixels left when the viewport narrows. */ pixels left when the viewport narrows. */

18
webroot/rsrc/js/application/core/behavior-lightbox-attachments.js
View file

@ -15,7 +15,6 @@ JX.behavior('lightbox-attachments', function (config) {
var next = null; var next = null;
var x_margin = 40; var x_margin = 40;
var y_margin = 100; var y_margin = 100;
var onscroll = window.onscroll;
var downloadForm = JX.$H(config.downloadForm); var downloadForm = JX.$H(config.downloadForm);
function loadLightBox(e) { function loadLightBox(e) {
@ -88,21 +87,13 @@ JX.behavior('lightbox-attachments', function (config) {
); );
JX.DOM.appendContent(lightbox, name_element); JX.DOM.appendContent(lightbox, name_element);
var s = JX.Vector.getScroll(); var closeIcon = JX.$N('a',
var closeIcon = '';
// Don't show the close icon if the beautiful header is
// still mostly present. Optimizes for common case of
// clicking on an attachment in object detail view without
// scrolling.
if (s.y >= 22) {
closeIcon = JX.$N('a',
{ {
className : 'lightbox-close', className : 'lightbox-close',
href : '#' href : '#'
} }
); );
JX.DOM.listen(closeIcon, 'click', null, closeLightBox); JX.DOM.listen(closeIcon, 'click', null, closeLightBox);
}
JX.DOM.appendContent(lightbox, closeIcon); JX.DOM.appendContent(lightbox, closeIcon);
var leftIcon = ''; var leftIcon = '';
if (next) { if (next) {
@ -225,7 +216,6 @@ JX.behavior('lightbox-attachments', function (config) {
lightbox = null; lightbox = null;
prev = null; prev = null;
next = null; next = null;
window.onscroll = onscroll;
} }
function loadAnotherLightBox(el, e) { function loadAnotherLightBox(el, e) {
@ -243,13 +233,8 @@ JX.behavior('lightbox-attachments', function (config) {
} }
var img = JX.DOM.find(lightbox, 'img'); var img = JX.DOM.find(lightbox, 'img');
var d = JX.Vector.getDim(img); var d = JX.Vector.getDim(img);
var s = JX.Vector.getScroll();
JX.Stratcom.addData(img, { x : d.x, y : d.y } ); JX.Stratcom.addData(img, { x : d.x, y : d.y } );
window.onscroll = function() {
window.scrollTo(s.x, s.y);
};
return resizeLightBox(e); return resizeLightBox(e);
} }
@ -259,7 +244,6 @@ JX.behavior('lightbox-attachments', function (config) {
} }
var img = JX.DOM.find(lightbox, 'img'); var img = JX.DOM.find(lightbox, 'img');
var v = JX.Vector.getViewport(); var v = JX.Vector.getViewport();
var s = JX.Vector.getScroll();
var d = JX.Stratcom.getData(img); var d = JX.Stratcom.getData(img);
var w = d.x; var w = d.x;