Bug with Table reflow on Safari #5380

Closed
agcolom opened this Issue Dec 15, 2012 · 10 comments

Projects

None yet

6 participants

@agcolom
Member
agcolom commented Dec 15, 2012

The table in this example does not display properly when the screen wide, then made narrow and then wide again http://jquerymobile.com/test/docs/tables/table-reflow.html

The effect is that the columns are not aligned properly, see picture 1.
tablereflow-bug1

Then, if you make the window narrow again and wide again, you get a different misalignement, and this continues each time you resize the table. see pictures 2 and 3
tablereflow-bug2
tablereflow-bug3

Only seems to happen with Safari (FF and Chrome are fine).
reproduce with Safari 5.1.7 on Mac OS X 10.6.8

@toddparker
Contributor

I just tested that page on Safari 6.0.2 on Mountain Lion and can't reproduce it so it looks like Apple fixed this bug. Can you upgrade to a higher version on 10.6 or is that the max?

@vicoysito

i have the same problem on chrome on android... some idea?

@agcolom
Member
agcolom commented Dec 17, 2012

just for the record, I cannot upgrade to a higher version of Safari on 10.6

@vicoysito

I could solve it by adding the following code in the header:

-----

<script> var htmlTemp = ""; $(document).ready(function() { $(window).bind("orientationchange", mainFunction); }); function mainFunction(){ if(window.orientation!=0 && htmlTemp ==""){ htmlTemp = $("#YOURTABLEID").html(); $("#YOURTABLEID").html(""); $("#YOURTABLEID").html(htmlTemp); htmlTemp =""; } } </script>

for some strange reason the table is not updated well and you must restart the content

hope will be of your help greetings

@Wilto
Contributor
Wilto commented Jan 8, 2013

This should be closed by bafa5d9.

@agcolom, mind double-checking? It’s a nonsense fix, so we’ll need to make sure no other browsers are impacted.

@agcolom
Member
agcolom commented Jan 9, 2013

This issue is fixed on Safari 5.1.7 on Mac OS X 10.6.8

@Wilto Wilto closed this Jan 9, 2013
@Wilto
Contributor
Wilto commented Jan 9, 2013

Closed by bafa5d9

@jaspermdegroot
Member

Has anybody tested this on iOS 5 Mobile Safari iPad 1?

@arschmitz
Member

i will test this when i get home on monday on iPad iOS5 don't have it with me in DC

@jaspermdegroot
Member

If I remove the .ui-table-reflow.ui-responsive { display: table-row-group; } fix (see #6584) I can reproduce the issue on Safari 5.1.7 / Windows 7.

@gabrielschulhof gabrielschulhof added a commit that referenced this issue May 30, 2014
@dylanb @gabrielschulhof dylanb + gabrielschulhof Table: remove reflow CSS hack for Safari <= 5
It causes problems with assistive technology not being able to detect tables.

This effectively reverts bafa5d9, thus
removing the fix for gh-5380.

Closes gh-6584
Fixes gh-6583
Re gh-5380
71c823e
@gabrielschulhof gabrielschulhof added a commit that referenced this issue May 30, 2014
@dylanb @gabrielschulhof dylanb + gabrielschulhof Table: remove reflow CSS hack for Safari <= 5
It causes problems with assistive technology not being able to detect tables.

This effectively reverts bafa5d9, thus
removing the fix for gh-5380.

(cherry picked from commit 71c823e)

Closes gh-6584
Fixes gh-6583
Re gh-5380
0ec40a4
@agcolom agcolom added a commit to agcolom/jquery-mobile that referenced this issue Nov 26, 2014
@dylanb @agcolom dylanb + agcolom Table: remove reflow CSS hack for Safari <= 5
It causes problems with assistive technology not being able to detect tables.

This effectively reverts bafa5d9, thus
removing the fix for gh-5380.

Closes gh-6584
Fixes gh-6583
Re gh-5380
4f87675
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment