Bug Tracker

Opened 6 years ago

Closed 5 years ago

#15037 closed feature (migrated)

$.show() can break responsive stylesheets

Reported by: sten_paa@… Owned by:
Priority: high Milestone: 1.12/2.2
Component: effects Version: 1.11.0
Keywords: Cc:
Blocked by: Blocking:

Description

When $.show() is called the computed display value is cemented as an inline style. This can cause inconsistent behavior.

Fiddle: http://jsfiddle.net/jinglesthula/ZttLJ/

Note that in the fiddle I use JavaScript to change the 'layout'. This simulates what would happen if the display: inline style were applied conditionally based on a responsive media query. That is, a given block of code could produce different results based on something like the orientation of a device and when the device orientation (really, the viewport width) changed with respect to when the show/hide calls are made.

I understand that based on the fact that an inline style is applied at the point when .show() is called that the browser is rendering the styles properly. The 'bug' I suppose comes in the fact that a dynamic computed value is assumed to be ok to translate to a more fixed inline style.

Resolution may involve finding a way to 'clean up' the inline style at the end of .show() and allow all styles not provided by jQuery to continue doing exactly what they were before show/hide were invoked.

Change History (4)

comment:1 Changed 6 years ago by gibson042

Component: unfiledeffects
Milestone: None1.next/2.next
Status: newopen
Type: bugfeature

Cleanup is not possible in the current API because (for better or worse) .show() works on elements suppressed by stylesheet rules. This may be an issue best solved by plugin, but it does seem like we've taken the wrong path (which has also affected us through defaultDisplay). I'll leave this for 1.12/2.2 consideration.

comment:2 Changed 6 years ago by dmethvin

Milestone: 1.next/2.next1.12/2.2
Priority: undecidedhigh

Let's address this via docs, because I don't think there is any way we can read all possible intents with .show() and .hide(). In general I'd like to deprecate them and encourage people to use classes instead. There may be some code changes to also be made here (*simplifications* I would hope) so I'll leave the ticket open.

comment:3 Changed 5 years ago by gibson042

It was noted in the meeting today that ignoring stylesheets and just looking at inline styles would resolve this, #15192, #13962, #9065, and a host of other show/hide/toggle bugs... and probably eliminate defaultDisplay to boot. Of course, there's no way to know about bugs that would have been filed with different behavior, but it's worth looking into the consequences of such a breaking change.

comment:4 Changed 5 years ago by m_gol

Resolution: migrated
Status: openclosed
Note: See TracTickets for help on using tickets.