Separate Layout and Visual Viewports for Fixed Positioning
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Existing touch-capable web browsers fail to comply with W3C standards for page re-layout during zooming, leading to compatibility issues with websites that use fixed-position elements and backgrounds, resulting in broken functionality and the need for special versions for different browsers or devices.
Innovation Solution
Implementing a separate layout viewport and visual viewport, where fixed elements are attached to the layout viewport, and the visual viewport can pan independently, allowing for optical zoom without altering the page layout and accommodating overlay user interfaces like on-screen touch keyboards.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Ease of operation
If optical zoom is implemented by stretching the page, then zoom functionality is achieved, but W3C standards compliance deteriorates and fixed-position elements break
Solution Approach 1:
The patent divides the viewport into two independent components: a layout viewport for page layout and a visual viewport for display. This segmentation allows optical zoom to operate on the visual viewport without affecting the layout viewport, thus maintaining W3C compliance while enabling zoom functionality. The layout viewport ensures proper re-layout according to standards, while the visual viewport handles the visual transformation.
Solution Approach 2:
The patent introduces an intermediary transformation layer between the layout viewport and the visual viewport. This intermediary handles the optical zoom operation by transforming coordinates and dimensions without directly modifying the page layout. The intermediary acts as a buffer that decouples the zoom operation from the layout process, ensuring both standards compliance and functional zoom capability.
2Ease of operation
If fixed elements are positioned relative to the visual viewport, then they remain stationary during scrolling, but they break during optical zoom operations
Solution Approach 1:
The patent segments the positioning reference for fixed elements from the visual viewport. Instead of anchoring fixed elements to the visual viewport (which moves during zoom), the patent anchors them to the layout viewport (which maintains stable dimensions). This segmentation ensures fixed elements remain reliable during zoom operations while still appearing stationary during normal scrolling.
Solution Approach 2:
The patent implements dynamic positioning where fixed elements automatically adjust their visual position based on the relationship between the layout viewport and visual viewport. During zoom operations, the visual viewport transforms while the layout viewport remains stable, causing fixed elements to dynamically maintain their correct positions without breaking.
3Adaptability or versatility
If the visual viewport is manipulated for overlay interfaces, then touch input capability is improved, but compatibility with websites using fixed-position elements deteriorates
Solution Approach 1:
The patent segments the viewport into layout and visual components, allowing independent manipulation of the visual viewport for overlay interfaces while the layout viewport maintains compatibility with websites. The visual viewport can be resized or transformed to accommodate touch keyboards and other overlays, while the layout viewport continues to render pages according to standard layout rules, ensuring both adaptability and compatibility.
Data Source
Figure 1
Figure 2
Figure 3
AI summary
Various embodiments utilize a layout viewport and a visual viewport separate from the layout viewport. The layout viewport is utilized for such things as page layout operations and reporting Document Object Model values to script. The layout viewport can be thought of as an initial rectangle which is equivalent in size to the initial containing block. The initial containing block is a containing block that contains web content that is initially visible to the user. The visual viewport is separate from the layout viewport and is allowed to be freely manipulated relative to the layout viewport. For example, the visual viewport may "push" the layout viewport around when it collides with the layout viewport boundaries. The visual viewport can be thought of as the rectangle that is visible to the user.