Category Archives: General

How we fixed the -webkit-overflow-scrolling: touch; bug on iOS

When working with the overflow: scroll; attribute, the -webkit-overflow-scrolling: touch; attribute can be very useful on mobile sites. It basically changes the awkward scrolling behavior into the normal, expected behavior.

When you dynamically add content to a div with -webkit-overflow-scrolling: touch; that exceeds the div in height, it becomes broken and unscrollable. You can fix this by constantly having an inner div, that triggers the scrollbar because its 1px higher than the outer div:

.outer {
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  /* More properties for a fixed height ... */
}

.inner {
  height: calc(100% + 1px);
}

 

My Sublime Text 2 Configuration

Here is my Sublime Text 2 configuration file. Install these packages before applying it:

  • Github Color Theme
  • Theme – Centurion
{
  "bold_folder_labels": true,
  "color_scheme": "Packages/Github Color Theme/GitHub.tmTheme",
  "drag_text": false,
  "folder_exclude_patterns": [
    ".svn",
    ".git",
    ".hg",
    "CVS",
    ".sass-cache"
  ],
  "font_size": 10,
  "highlight_line": true,
  "line_padding_bottom": 2,
  "line_padding_top": 2,  
  "show_tab_close_buttons": false,
  "tab_size": 2,
  "theme": "Centurion.sublime-theme",
  "translate_tabs_to_spaces": true,
  "use_tab_stops": true,
  "word_wrap": true
}

Screenshot of the editor (looks very similar on OS X)

dark theme