Mars Mobile Web Solutions

Mars provides resources and guides for achieving high-performance Mobile Web development. The core focus areas include:

• High-performance CSS3 animations: Techniques for smooth animations on mobile devices.
• CSS animation property performance: Understanding which CSS properties are optimized for animation.
• High-performance scrolling: Implementing smooth scrolling behaviors.
• Offline Web Apps: Implementing Service Workers for offline capabilities, message synchronization, and push notifications.

In some iOS versions, a special character (U+2006) may appear between English letters when using Chinese input methods. You can remove it using a regular expression:

this.value = this.value.replace(/\u2006/g, '');

To achieve high-performance CSS animations (ideally 60fps), avoid animating properties that trigger Layout (reflow) or Paint (repaint). Animating such properties forces the browser to recalculate the geometry of the page and redraw pixels, which is computationally expensive.

Instead, use properties that only trigger Composite (recomposite). The most common and effective way to do this is by using transform (e.g., translateX, translateY, scale, rotate) instead of positional properties like left, top, margin, or width/height.

Performance Comparison:

• left / top: Triggers Layout $\rightarrow$ Paint $\rightarrow$ Composite (Slowest)
• transform: Triggers Composite only (Fastest)

iOS browsers may reset font sizes when switching to landscape mode. To prevent inconsistent font weights and sizes, set text-size-adjust to 100%.

-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;

An alternative method to achieve a fine 1px border without external images is to use a pseudo-element (:after) and scale it down using transform: scale(0.5). This effectively halves the perceived thickness of the border on high-DPI screens.

Implementation:

1. Set the parent element to position: relative.
2. Create an :after pseudo-element with position: absolute and negative offsets (e.g., top: -50%, left: -50%, etc.) to cover the area.
3. Apply transform: scale(0.5) to the pseudo-element.
4. Define the border-top and border-bottom on the pseudo-element.

.border-1px {
    position: relative;
}
.border-1px:after {
    position: absolute;
    content: '';
    top: -50%;
    bottom: -50%;
    left: -50%;
    right: -50%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    border-top: 1px solid #666;
    border-bottom: 1px solid #666;
}

To improve mobile animation smoothness and prevent stuttering, use 3D transforms to trigger hardware acceleration (GPU). This is significantly more performant than animating properties like left or top.

Note: 3D transforms consume more memory and power; use them only when performance issues are present.

To prevent flickering at the start of an animation, apply the backface-visibility: hidden and perspective hacks.

/* Enable GPU acceleration */
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);

/* Prevent flickering hack */
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;

-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;

To ensure high-performance mobile web experiences, follow these CSS optimization rules:

1. Avoid expensive properties: Minimize the use of box-shadows and gradients, as they are significant performance killers. Consider flat design instead.
2. Remove elements from document flow: Use position: fixed; or position: absolute; for animated elements to reduce the impact of reflows on the rest of the page.