Bug 106748 - SVG Elements not in view on page load do not display
Summary: SVG Elements not in view on page load do not display
Status: RESOLVED DUPLICATE of bug 106221
Alias: None
Product: WebKit
Classification: Unclassified
Component: SVG (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P2 Major
Assignee: Nobody
URL: http://jsfiddle.net/yY7QD/2/
Keywords:
Depends on:
Blocks:
 
Reported: 2013-01-13 16:28 PST by Kobi
Modified: 2013-01-14 05:36 PST (History)
4 users (show)

See Also:

Attachments
Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Kobi 2013-01-13 16:28:42 PST 
Tested on Chrome 24.0.1312.52 (Mac), Chrome 23.0.1271.97 (Windows 7), WebKit Nightly Safari. When part of an SVG image is not in view when the page loads, the parts in view (and sometimes other parts) do not load. I've got the code I am using to create the SVG in this jsFiddle: http://jsfiddle.net/yY7QD/2/. If you shrink your window, scroll the HTML section to the top, and reload the page, the bottom half of the image does not load. Here is the code use to generate the SVG (created by Adobe Illustrator CS6):

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="690px" height="420px" viewBox="0 43 690 420" enable-background="new 0 43 690 420" xml:space="preserve">
<defs></defs>
<filter id="fullblur" x="0" y="0">
    <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
</filter>

<filter id="halfblur" x="0" y="0">
    <feGaussianBlur in="SourceGraphic" stdDeviation="1" />
</filter>

<filter id="noblur" x="0" y="0">
    <feGaussianBlur in="SourceGraphic" stdDeviation="0" />
</filter>


<!-- BACKGROUND (hidden) -->
<rect y="43" display="none" fill="#D1DBBB" width="690" height="420"/>

<!-- STAGE -->
<ellipse fill="#CC3333" stroke="#000000" cx="339.5" cy="43" rx="169.5" ry="42.5"/>



<!-- SEATS -->
<g>

    <!-- STUDENT SECTIONS -->
    <g id="studhover">
        <g filter="url(#halfblur)" id="studchart" class="chartsection">

        <g id="s1">
                <path class="sFill" fill="#FECB2F" d="M90.75,136c0,2.761,2.239,5,5,5h150c2.761,0,5-2.239,5-5V90.5c0-2.761-2.239-5-5-5h-150
            c-2.761,0-5,2.239-5,5V136z"/>
        <path class="sStroke" fill="none" stroke="#000000" d="M90.75,136c0,2.761,2.239,5,5,5h150c2.761,0,5-2.239,5-5V90.5c0-2.761-2.239-5-5-5h-150
            c-2.761,0-5,2.239-5,5V136z"/>
    </g>

            <g id="s2">
            <path class="sFill" fill="#FECB2F" d="M265.75,150c0,2.761,2.239,5,5,5h150c2.762,0,5-2.239,5-5v-45.5c0-2.761-2.238-5-5-5h-150
        c-2.761,0-5,2.239-5,5V150z"/>
            <path class="sStroke" fill="none" stroke="#000000" d="M265.75,150c0,2.761,2.239,5,5,5h150c2.762,0,5-2.239,5-5v-45.5c0-2.761-2.238-5-5-5h-150
        c-2.761,0-5,2.239-5,5V150z"/>
        </g>

            <g id="s3">
            <path class="sFill" fill="#FECB2F" d="M439.25,136c0,2.761,2.238,5,5,5h150c2.762,0,5-2.239,5-5V90.5c0-2.761-2.238-5-5-5h-150c-2.762,0-5,2.239-5,5V136z"/>
            <path class="sStroke" fill="none" stroke="#000000" d="M439.25,136c0,2.761,2.238,5,5,5h150c2.762,0,5-2.239,5-5V90.5c0-2.761-2.238-5-5-5h-150
            c-2.762,0-5,2.239-5,5V136z"/>
        </g>

            <g id="s4">
            <path class="sFill" fill="#FECB2F" d="M90.75,205.5c0,2.761,2.239,5,5,5h150c2.761,0,5-2.239,5-5V160c0-2.761-2.239-5-5-5h-150
            c-2.761,0-5,2.239-5,5V205.5z"/>
            <path class="sStroke" fill="none" stroke="#000000" d="M90.75,205.5c0,2.761,2.239,5,5,5h150c2.761,0,5-2.239,5-5V160c0-2.761-2.239-5-5-5h-150
            c-2.761,0-5,2.239-5,5V205.5z"/>
            </g>

            <g id="s5">
            <path class="sFill" fill="#FECB2F" d="M265.75,218c0,2.761,2.239,5,5,5h150c2.762,0,5-2.239,5-5v-45.5c0-2.761-2.238-5-5-5h-150
        c-2.761,0-5,2.239-5,5V218z"/>
            <path class="sStroke" fill="none" stroke="#000000" d="M265.75,218c0,2.761,2.239,5,5,5h150c2.762,0,5-2.239,5-5v-45.5c0-2.761-2.238-5-5-5h-150
        c-2.761,0-5,2.239-5,5V218z"/>
        </g>

            <g id="s6">
            <path class="sFill" fill="#FECB2F" d="M439.25,205.5c0,2.761,2.238,5,5,5h150c2.762,0,5-2.239,5-5V160c0-2.761-2.238-5-5-5h-150
        c-2.762,0-5,2.239-5,5V205.5z"/>
            <path class="sStroke" fill="none" stroke="#000000" d="M439.25,205.5c0,2.761,2.238,5,5,5h150c2.762,0,5-2.239,5-5V160c0-2.761-2.238-5-5-5h-150
        c-2.762,0-5,2.239-5,5V205.5z"/>
        </g>

        </g>

        <!-- Filling in the gaps -->
        <g>
            <rect x="251" y="84" fill="transparent" width="15" height="140" id="sVertLine1" />
            <rect x="425" y="84" fill="transparent" width="15" height="140" id="sVertLine2" />

            <rect x="266" y="84" fill="transparent" width="159" height="15" id="sHorizLine1" />
            <rect x="90" y="140" fill="transparent" width="161" height="15" id="sHorizLine2a" />
            <rect x="440" y="140" fill="transparent" width="161" height="15" id="sHorizLine2b" />
            <rect x="266" y="153" fill="transparent" width="161" height="15" id="sHorizLine3" />
            <rect x="90" y="210" fill="transparent" width="161" height="12" id="sHorizLine4a" />
            <rect x="440" y="210" fill="transparent" width="161" height="12" id="sHorizLine4b" />
        </g>

    </g>

    <!-- GUEST SECTIONS -->
    <g id="guesthover">
        <g filter="url(#halfblur)" id="guestchart" class="chartsection">
            <g>
        <path class="gFill" fill="#3333CC" d="M91.5,273c0,2.762,2.239,5,5,5h150c2.761,0,5-2.238,5-5v-45.5c0-2.761-2.239-5-5-5h-150
            c-2.761,0-5,2.239-5,5V273z"/>
        <path class="gStroke" fill="none" stroke="#000000" d="M91.5,273c0,2.762,2.239,5,5,5h150c2.761,0,5-2.238,5-5v-45.5c0-2.761-2.239-5-5-5h-150
            c-2.761,0-5,2.239-5,5V273z"/>
    </g>
            <g>
        <path class="gFill" fill="#3333CC" d="M440,273c0,2.762,2.238,5,5,5h150c2.762,0,5-2.238,5-5v-45.5c0-2.761-2.238-5-5-5H445c-2.762,0-5,2.239-5,5
            V273z"/>
        <path class="gStroke" fill="none" stroke="#000000" d="M440,273c0,2.762,2.238,5,5,5h150c2.762,0,5-2.238,5-5v-45.5c0-2.761-2.238-5-5-5H445
            c-2.762,0-5,2.239-5,5V273z"/>
    </g>
            <g>
        <path class="gFill" fill="#3333CC" d="M91.5,342.5c0,2.762,2.239,5,5,5h150c2.761,0,5-2.238,5-5V297c0-2.762-2.239-5-5-5h-150
            c-2.761,0-5,2.238-5,5V342.5z"/>
        <path class="gStroke" fill="none" stroke="#000000" d="M91.5,342.5c0,2.762,2.239,5,5,5h150c2.761,0,5-2.238,5-5V297c0-2.762-2.239-5-5-5h-150
            c-2.761,0-5,2.238-5,5V342.5z"/>
    </g>
            <g>
        <path class="gFill" fill="#3333CC" d="M440,342.5c0,2.762,2.238,5,5,5h150c2.762,0,5-2.238,5-5V297c0-2.762-2.238-5-5-5H445c-2.762,0-5,2.238-5,5
            V342.5z"/>
        <path class="gStroke" fill="none" stroke="#000000" d="M440,342.5c0,2.762,2.238,5,5,5h150c2.762,0,5-2.238,5-5V297c0-2.762-2.238-5-5-5H445
            c-2.762,0-5,2.238-5,5V342.5z"/>
    </g>
            <g>
        <path class="gFill" fill="#3333CC" d="M266.5,287c0,2.762,2.239,5,5,5h150c2.762,0,5-2.238,5-5v-45.5c0-2.761-2.238-5-5-5h-150
            c-2.761,0-5,2.239-5,5V287z"/>
        <path class="gStroke" fill="none" stroke="#000000" d="M266.5,287c0,2.762,2.239,5,5,5h150c2.762,0,5-2.238,5-5v-45.5c0-2.761-2.238-5-5-5h-150
            c-2.761,0-5,2.239-5,5V287z"/>
    </g>
            <g>
        <path class="gFill" fill="#3333CC" d="M266.5,355c0,2.762,2.239,5,5,5h150c2.762,0,5-2.238,5-5v-45.5c0-2.762-2.238-5-5-5h-150
            c-2.761,0-5,2.238-5,5V355z"/>
        <path class="gStroke" fill="none" stroke="#000000" d="M266.5,355c0,2.762,2.239,5,5,5h150c2.762,0,5-2.238,5-5v-45.5c0-2.762-2.238-5-5-5h-150
            c-2.761,0-5,2.238-5,5V355z"/>
    </g>
            <g>
        <path class="gFill" fill="#3333CC" d="M91.5,410.5c0,2.762,2.239,5,5,5h150c2.761,0,5-2.238,5-5V365c0-2.762-2.239-5-5-5h-150
            c-2.761,0-5,2.238-5,5V410.5z"/>
        <path class="gStroke" fill="none" stroke="#000000" d="M91.5,410.5c0,2.762,2.239,5,5,5h150c2.761,0,5-2.238,5-5V365c0-2.762-2.239-5-5-5h-150
            c-2.761,0-5,2.238-5,5V410.5z"/>
    </g>
            <g>
        <path class="gFill" fill="#3333CC" d="M440,410.5c0,2.762,2.238,5,5,5h150c2.762,0,5-2.238,5-5V365c0-2.762-2.238-5-5-5H445c-2.762,0-5,2.238-5,5
            V410.5z"/>
        <path class="gStroke" fill="none" stroke="#000000" d="M440,410.5c0,2.762,2.238,5,5,5h150c2.762,0,5-2.238,5-5V365c0-2.762-2.238-5-5-5H445
            c-2.762,0-5,2.238-5,5V410.5z"/>
    </g>
            <g>
        <path class="gFill" fill="#3333CC" d="M266.5,423c0,2.762,2.239,5,5,5h150c2.762,0,5-2.238,5-5v-45.5c0-2.762-2.238-5-5-5h-150
            c-2.761,0-5,2.238-5,5V423z"/>
        <path class="gStroke" fill="none" stroke="#000000" d="M266.5,423c0,2.762,2.239,5,5,5h150c2.762,0,5-2.238,5-5v-45.5c0-2.762-2.238-5-5-5h-150
            c-2.761,0-5,2.238-5,5V423z"/>
    </g>
        </g>

        <!-- Filling in the gaps -->
        <g>
            <rect x="251" y="224" fill="transparent" width="15" height="206" id="gVertLine1" />
            <rect x="425" y="224" fill="transparent" width="15" height="206" id="gVertLine2" />

            <rect x="266" y="222" fill="transparent" width="159" height="15" id="gHorizLine1" />
            <rect x="90" y="278" fill="transparent" width="161" height="15" id="gHorizLine2a" />
            <rect x="440" y="278" fill="transparent" width="161" height="15" id="gHorizLine2b" />
            <rect x="266" y="291" fill="transparent" width="161" height="15" id="gHorizLine3" />
            <rect x="90" y="348" fill="transparent" width="161" height="15" id="gHorizLine4a" />
            <rect x="440" y="348" fill="transparent" width="161" height="15" id="gHorizLine4b" />
            <rect x="266" y="360" fill="transparent" width="161" height="15" id="gHorizLine5" />
            <rect x="90" y="417" fill="transparent" width="161" height="13" id="gHorizLine4a" />
            <rect x="440" y="417" fill="transparent" width="161" height="13" id="gHorizLine4b" />
        </g>

    </g>
</g>
</svg>
Comment 1 Florin Malita 2013-01-14 05:33:11 PST 

*** This bug has been marked as a duplicate of bug 106221 ***
Comment 2 Florin Malita 2013-01-14 05:36:16 PST 
Thanks for the report Kobi. This is a known issue with filter results caching, hopefully soon to be fixed.