Page MenuHomePhabricator

Vector sidebar transition is not in sync with logo/content transition.
Closed, ResolvedPublic

Description

  1. Resize the window narrower/wider than 982px.
  2. Observe sidebar contents, logo and content area transition their size and spacing.

The logo and content area transition in sync, but the sidebar is not. In fact, it's not transitioning at all. So when the others have a 250ms transition, the sidebar contents just snap out of sync.

Event Timeline

Krinkle created this task.Dec 31 2014, 3:04 PM
Krinkle raised the priority of this task from to Needs Triage.
Krinkle updated the task description. (Show Details)
Krinkle added projects: Vector, Regression.
Krinkle set Security to None.
Krinkle added subscribers: Krinkle, matmarex.
Krinkle added subscribers: brion, Jdlrobson.

Regression introduced in 99c92a87fc32fb8.

I never understood the transitions.

They come across as someone's excuse to play with CSS transitions/media queries for the first time. They don't actual add much to the experience and I would personally prefer we turn them off.

The fact that patch was introduced a year ago and no one noticed backs up my view that this is the right thing to do.

Whatever. It's not like people are resizing their browsers to witness the glorious animations.

Aklapper triaged this task as Lowest priority.Jan 1 2015, 10:36 PM
GOIII added a subscriber: GOIII.EditedJan 4 2015, 3:03 AM

Whatever. It's not like people are resizing their browsers to witness the glorious animations.

Nevertheless, it hasn't gone unnoticed. It ''screws'' with some absolutely positioned elements on Wikisource for some folks while others seem to think its harmless -- not true when you're trying to faithfully replicate the layout of a printed book for example.

offending css
/*@media screen and (min-width:982px)*/
.mw-body {
    margin-left: 11em;
    padding: 1.25em 1.5em 1.5em 1.5em;
}
/*@media screen*/
.mw-body {
    margin-left: 10em;
    padding: 1em;
    border: 1px solid #a7d7f9;
    border-right-width: 0px;
    margin-top: -1px;
    background-color: #fff;
    color: #252525;
    direction: ltr;
}

And fwiw... folks have noticed the same thing happening in mobile-mode at ~768px -- but I'm guessing that is considered normal and was intentional by design.

OK, let's murder it.

gerritbot added a subscriber: gerritbot.

Change 185330 had a related patch set uploaded (by Bartosz Dziewoński):
Remove CSS transition on window resize

https://gerrit.wikimedia.org/r/185330

Patch-For-Review

Change 185330 merged by jenkins-bot:
Remove CSS transition on window resize

https://gerrit.wikimedia.org/r/185330

Jdlrobson closed this task as Resolved.Jan 16 2015, 11:26 PM