Bug 106748

Summary: SVG Elements not in view on page load do not display
Product: WebKit Reporter: Kobi <kobitate94>
Component: SVGAssignee: Nobody <webkit-unassigned>
Status: RESOLVED DUPLICATE    
Severity: Major CC: fmalita, pdr, schenney, zimmermann
Priority: P2    
Version: 528+ (Nightly build)   
Hardware: All   
OS: All   
URL: http://jsfiddle.net/yY7QD/2/

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.