Page MenuHomePhabricator

Initial focus blocks page up/down
Closed, ResolvedPublic

Description

  1. Load any URL to the blog, e.g. https://blog.wikimedia.org/
  2. Press page down

I. Observed: nothing happens.
II. Expected: the page scrolls down.

  1. Click some block of text (but not one covered by JavaScript slideshows), or on the white side.
  2. Press page down

III. Observed: works.

Verified in Firefox and Chromium.


Version: wmf-deployment
Severity: minor

Details

Reference
bz70063

Event Timeline

bzimport raised the priority of this task from to Low.Nov 22 2014, 3:29 AM
bzimport added a project: Wikimedia-Blog.
bzimport set Reference to bz70063.
bzimport added a subscriber: Unknown Object (MLST).
Nemo_bis created this task.Aug 26 2014, 8:33 PM

Thanks, looking into it. (For our internal reference: Filed as https://wordpressvip.zendesk.com/requests/33251 )

FYI, according to our support at Automattic, the problem appear to be caused by the CSS/layout of our theme, specifically the block from style.css (http://ur1.ca/i85b2 ) reproduced below. According to the, when one removes that block, scrolling works as expected, although of course the layout is broken. It's not yet clear how to fix it though, so this will need to be worked on later, unless someone can provide a solution here (Moiz, any immediate insights?).

/* block */
.shell { width:942px; margin:0 auto; position:relative; }

/* absolute wrapper required for panel behaviour on mobile devices */
.page-wrapper { position:absolute; left:0; top:0; width:100%; height:100%; overflow-x:hidden; overflow-y:scroll; z-index: 2; background-color:#fff; -webkit-overflow-scrolling: touch; }

.page-sidebar { position:absolute; left:-250px; top:0; height:100%; width:250px; overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling: touch; z-index: 1;}

.page-header { position:relative; z-index: 5; }
.page-main { padding:22px 0 30px; width:100%; position:relative; z-index: 1; }
.page-footer { background:#3a3a3a url(images/page-footer.png) repeat-x; padding:75px 0 50px; color:#666; font-size:14px; line-height:22px; width:100%; }

.content { float:left; width:570px; }
.sidebar { float:right; width:340px; }

Is this still an issue? I've just tried it with Chrome and Firefox, and both worked. :-)

Yes, seems fixed. I can't reproduce the issue and I don't remember experiencing it again in recent times.

EdErhart-WMF closed this task as Resolved.Nov 19 2016, 7:54 PM