Checkbox hack lightbox gallery

HTML & CSS
1

Hey All, I remember hearing about ios having trouble with pages that use the checkbox hack. Is that still the case?

I’m doing a lightbox gallery page based off this example.

Do I need to add this ios workaround into my lightbox gallery?
I ask because I don’t have an ios to test with.

/**
  Advanced Checkbox Hack
  
  # What? #
  The better Checkbox-Hack because it works for both iOS and Android. 

  ## 1. Android <= 4.1.2
  pseudo-class + general/adjacent sibling doesn't 
  work on Android so we need a hack:

  body { -webkit-animation: bugfix infinite 1s; }
  @-webkit-keyframes bugfix { from {padding:0;} to {padding:0;} }

  ## 2. iOS < 6.0
  Due to a bug on iOS it's not possible to click the label
  to toggle the input (checkbox), so we add an empty 
  onclick to the label:

  <label for="button" onclick>click / touch</label>


  # 2012 by Tim Pietrusky
  # timpietrusky.com
**/
2

Hi Ray,

The checkbox hack works on my iPhone SE without the animation fix.

I always found the body animation fix caused more trouble than it was worth on my old iPhone. It used to slow the page to a crawl and then eventually stop because of the continuous animation causing a constant reflow calculation.

I don’t know about android but guess it’s also fixed these days.

1 Like
3

Hi Paul, Thanks for confirming that the checkbox works for your iPhone SE.

I think I’ll stay away from the ‘fixes’ then. I see that the author had dated it as 2012’ so I suspect android may be fixed by now as well. I can check that on a google pixel phone.

Thanks again

1 Like
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.