Member Avatar for navp

Hello everyone

I am designing a j-query mobile app and I have set the bacground as a canvas and set it to fixed, which is causing it to display white space when i scrool down. Following is the image of the problem

b5991988c1e4153b2f9d363fb86ea210

Any fix for this? Thnaks for the reply. :)

  • 3 Contributors
  • 5 Replies
  • 321 Views
  • 14 Hours Discussion Span
  • Latest Post Latest Post by navp

Dani AI

Generated

Brief recap: is using an HTML5 canvas as a fixed background inside a jQuery Mobile page and sees a white band when scrolling. asked for code and posted an update; correctly pointed out a broken stylesheet early on — that kind of syntax error can silently prevent CSS rules from applying, so fix that first.

Why this happens: mobile browsers change the visible viewport when the address bar or on‑screen keyboard shows/hides, and jQuery Mobile wraps pages and can transform or reposition toolbars. That means one‑time measurements or CSS units like 100vh often don’t match the real, current visible area. If the canvas is sized only at load (or only on window resize events that don’t fire for toolbar changes) the drawn area can be smaller than what the user actually sees, producing a white gap.

Practical, non-invasive fixes:

  • Anchor the canvas so it always starts at the top-left of the viewport, keep it behind content (lower z-index) and non-interactive (pointer-events:none).
  • Set html/body to the canvas base color as a fallback so any tiny uncovered pixels don’t show white.
  • Size the canvas from the real visual viewport when available (use visualViewport height/width, fall back to innerHeight/innerWidth). Recalculate and redraw on visualViewport events, orientationchange and resize so toolbar show/hide is handled.
  • Scale canvas pixel dimensions by devicePixelRatio to avoid blurriness on high-DPI screens.
  • Put the canvas as a direct child of body (outside jQuery Mobile page wrappers) so page transforms won’t clip or reposition it.
  • Double-check for stray CSS/HTML errors (unclosed style tags, etc.) that stop rules from taking effect.

Testing tips: try this on real devices and in mobile emulation, temporarily use a contrasting body background to see where the canvas ends, and watch visualViewport events while scrolling to confirm your resize/redraw logic runs.

Recommended Answers

All 5 Replies

Member Avatar for <M/>

Do you have any code that we can look at so we can fix the problem, rather than us just throwing out random solutions?

Member Avatar for navp 
 <style>
 #bgCanvas{
    position:fixed;
 }

 <body style="background:transparent">
<div data-role="page">    
    <div data-role="header" align="center">
        <h1>Home Page</h1>
    </div><!--header-->

    <canvas id="bgCanvas"> </canvas>

    <div data-role="content" align="center">
        .....
    </div><!--content-->

    <div data-role="footer">
        ....

    </div><!-- /footer -->
</div>

This is the code.

Member Avatar for navp 
 <style>
 #bgCanvas{
    position:fixed;
 }

 <body style="background:transparent">
<div data-role="page">    
    <div data-role="header" align="center">
        <h1>Home Page</h1>
    </div><!--header-->

    <canvas id="bgCanvas"> </canvas>

    <div data-role="content" align="center">
        .....
    </div><!--content-->

    <div data-role="footer">
        ....

    </div><!-- /footer -->
</div>

</body>

This is the code.

Member Avatar for TonyG_cyprus

Well, you haven't closed the style tag for a start, so thats a start.

Member Avatar for navp 
<style>
 #bgCanvas{
    position:fixed;
 }
[data-role=footer]{bottom:0; position:absolute !important; top: auto !important; width:100%; height:auto;}
 </style>

<body>
    <div data-role="page">    
        <div data-role="header" align="center">
        <h1>Home Page</h1>
        </div>
        <canvas id="bgCanvas"> </canvas>
        <!-- /header -->
            <div data-role="content" align="center">
                ....
            </div><!-- /content -->

            <div data-role="footer">
                ....            
            </div><!-- /footer -->
    </div>

    <script type="text/javascript">
        var bgCanvas = document.getElementById('bgCanvas');

        function render() {

            bgCanvas.patternizer({
        stripes : [ 
            {
                color: '#815629',
                rotation: 122,
                opacity: 100,
                mode: 'plaid',
                width: 1,
                gap: 5,
                offset: 0
            }
        ],
        bg : '#66431f'
        });

        }

        // resize the canvas to the window size
        function onResize() {

            // number of pixels of extra canvas drawn
            var buffer = 800;

            // if extra canvas size is less than the buffer amount
            if (bgCanvas.width - window.innerWidth < buffer ||
                bgCanvas.height - window.innerHeight < buffer) {

                // resize the canvas to window plus double the buffer
                bgCanvas.width = window.innerWidth + (buffer * 2);
                bgCanvas.height = window.innerHeight + (buffer * 2);

                render();
            }   

        }

        function init() {
            onResize();
            // create a listener for resize
            // cowboy's throttle plugin keeps this event from running hog wild
            window.addEventListener('resize', Cowboy.throttle(200, onResize), false);
        }


        init();
    </script>
</body>

here is the update code.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.