freqdec / datePicker

An attempt at writing a flexible, framework free, feature-rich and accessible datepicker
http://freqdec.github.io/datePicker/
MIT License
171 stars 56 forks source link

Fix scrunched header in Safari 6.0.5 #24

Closed tjgrathwell closed 11 years ago

tjgrathwell commented 11 years ago

Hey @freqdec, I work with @quavmo and we discovered the issue seen in #22 a month or so ago.

I just tried out the fiddle from that issue on my laptop and found it wasn't showing the problem. Until I upgraded to 6.0.5 (I was on 6.0.2). Which might explain any difficulties in reproducing the bug.

As far as fixing it, I played around with git-bisect and found it was caused in 7e0ad2960e44d0333f6f32eaf38b9a171cf51963, with the "lifted corners" effect. I think the bare minimum you need to produce the problem is

.date-picker table:before {
  content: "";
}

...which causes Safari to mysteriously give the table header zero width and height.

My solution was to move the :before and :after elements up to the containing .date-picker div, which hopefully doesn't cause any other problems. I moved the shadow a couple of pixels so it maintains the same appearance.

This has the added effect of removing a couple of pixels from above and below the table, which restores the internal spacing to its appearance prior to 7e0ad2960e44d0333f6f32eaf38b9a171cf51963.

Before

screen shot 2013-09-29 at 9 08 58 pm

After

screen shot 2013-09-29 at 9 08 52 pm

This should fix #22

freqdec commented 11 years ago

Many thanks guys!