Don't like ads? PRO users don't see any ads ;-)
Guest

Untitled

By: a guest on Apr 25th, 2012  |  syntax: None  |  size: 1.17 KB  |  hits: 14  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. CSS Columns Bug — breaks in mobile while using the :checked pseudo class
  2. .ff-container input{
  3. display: none;
  4. }
  5.  
  6. .ff-items li img{
  7. display: block;
  8. }
  9.  
  10. .clr {
  11. clear:both;
  12. }
  13.  
  14. .ff-items li{
  15. opacity: 0;
  16. -webkit-transition: opacity 0.2s ease-in-out;
  17.         transition: opacity 0.2s ease-in-out;  
  18. }
  19.  
  20. .ff-container input.ff-selector-type-all:checked ~ .ff-items li,
  21. .ff-container input.ff-selector-type-1:checked ~ .ff-items .ff-item-type-1,
  22. .ff-container input.ff-selector-type-2:checked ~ .ff-items .ff-item-type-2,
  23. .ff-container input.ff-selector-type-3:checked ~ .ff-items .ff-item-type-3,
  24. .ff-container input.ff-selector-type-4:checked ~ .ff-items .ff-item-type-4,
  25. .ff-container input.ff-selector-type-5:checked ~ .ff-items .ff-item-type-5{
  26. opacity: 1;
  27. }
  28.  
  29. .ff-container input.ff-selector-type-1:checked ~ .ff-items li:not(.ff-item-type-1),
  30. .ff-container input.ff-selector-type-2:checked ~ .ff-items li:not(.ff-item-type-2),
  31. .ff-container input.ff-selector-type-3:checked ~ .ff-items li:not(.ff-item-type-3),
  32. .ff-container input.ff-selector-type-4:checked ~ .ff-items li:not(.ff-item-type-4),
  33. .ff-container input.ff-selector-type-5:checked ~ .ff-items li:not(.ff-item-type-5){
  34. opacity: 0.1;
  35. }