Fixing the Mobile Web tips and tricks that can save your sanity
Kamen Bundev (Bundyo)
Twitter ID: @bundyo
Kendo UI Mobile Team
Telerik
Twitter ID: @bundyo
Kendo UI Mobile Team
Telerik
Smartphones changed the Web landscape.
Smartphones changed the Web landscape.
We grew to love them and support them.
It's a love / hate relationship
It's a love / hate relationship
We LOVE them.
It's a love / hate relationship
We LOVE them.
They HATE us.
Worldwide smartphone market, by OS, global sales 2011
Operating System Shipments
(millions)Market share Annual growth Android 237.7 48.8% 244% iOS 93.1 19.1% 96% Symbian 80.1 16.4% -29.1% BlackBerry 51.4 10.5% 5% Bada 13.2 2.7% 183.1% Windows Phone 6.8 1.4% -43.3% Others 5.4 1.1% 14.4% Total 487.7 100% 62.7% according to Canalys
The good news - WebKit is predominant
The good news - WebKit is predominant
The bad news - implementations vary a lot.
Support of some WebKit features across different mobile operating systems
Feature Android iOS BlackBerry OS HTML5 Forms X 5+ + SVG 3+ + + Masks mostly work + + (except 7.0) 3D Transforms 4+ (broken in 3) + PBOS 2+ WebGL X X (except ads) PBOS 2+
Escape route: Test everything you create,
on every device you can get
your hands on!
The hidden monsters of the mobile Web
- Slow performance
- Broken rendering
- Missing events
- Freezes and crashes
Use the
translatez(0),
Luke!
-webkit-transform: translatez(0)
is the new zoom: 1;
is the new zoom: 1;
- Sometimes can lead to worse performance
- Can break the rendering of masks
- May be not enough for hardware acceleration
- May lead to artifacts
- Breaks form elements on Android
- Not working at all in Android 2
Performance Degradation
Scenario:
Large list, higher than the screen,
custom scroller.
Outcome:
Bad perfomance, visible redraw,
flickering.
Escape route: Mind the size of your
accelerated elements.
Fair & Square
Scenario:
Hardware accelerated element,
WebKit masks aplenty.
Outcome:
Every mask turns into
colored rectangle.
Escape route:
Take extra care where you apply masks and transforms, never on the same element.
The Forbidden Fruit
Scenario:
Hardware acceleration triggers
have stopped working.
Outcome:
Bad performance, flickering
Walkaround:
Apply a 1ms or less transition
on the transformed element,
make sure it won't activate accidentaly
(use -webkit-transition-property to limit it).
Working in Secret
Scenario:
Open a new Activity, containing
another WebKit. Close it.
Outcome:
All transformed elements freeze, app still works down under.
Walkaround:
If you run into this issue,
remove the transforms
before opening the new Activity.
DeFormed
Scenario:
You want to use an
HTML5 date/time picker.
Outcome:
Not supported everywhere.
Escape route:
Use external libraries
if you really need the pickers,
or alternatively fall back
to text and validate your input.
Scenario:
Style the input focused state
in Android default browser.
Outcome:
White background and black text.
Walkaround:
Use this CSS, with a trade-off:
input[type=text], ...
{
-webkit-user-modify: read-write-plaintext-only;
}
However, this fake native input is
Android browser's way of
fixing text entry issues.
If invisible, bad things start to happen.
History Lessens
Scenario:
Single Page Application.
Outcome:
Navigation doesn't work
correctly, refresh failing.
Escape route:
Better resort to hashes
for mobile single page applications' history.
Labeling Jars
Scenario:
Click a label to focus
its associated input.
Outcome:
Nothing happens.
Walkaround:
Add empty onclick attribute to the label or its container.
Redraw Alone
Scenario:
Show an element,
run a transition on it.
Outcome:
The element shows directly
with its final CSS.
Walkaround:
with jQuery it boils down to this:element.css("display", "block").css("display");or without:
element.style.display = "block";
element.offsetWidth;