$.show() can break responsive stylesheets

Reported by:	sten_paa@yahoo.com	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.

Attachments (0)

Change History (4)

Changed April 19, 2014 01:44PM UTC by gibson042 comment:1

component:	unfiled → effects
milestone:	None → 1.next/2.next
status:	new → open
type:	bug → feature

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.

Changed April 30, 2014 01:24PM UTC by dmethvin comment:2

milestone:	1.next/2.next → 1.12/2.2
priority:	undecided → high

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.

Changed July 28, 2014 05:02PM UTC by gibson042 comment:3

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.

Changed October 21, 2014 12:38AM UTC by m_gol comment:4

resolution:	→ migrated
status:	open → closed

Migrated to https://github.com/jquery/jquery/issues/1767

Side navigation