RESOLVED DUPLICATE of bug 106221 106748
SVG Elements not in view on page load do not display 
https://bugs.webkit.org/show_bug.cgi?id=106748
Summary SVG Elements not in view on page load do not display
Kobi
Reported 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>
Attachments
Add attachment proposed patch, testcase, etc.
Florin Malita
Comment 1 2013-01-14 05:33:11 PST
*** This bug has been marked as a duplicate of bug 106221 ***
Florin Malita
Comment 2 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.
Note You need to log in before you can comment on or make changes to this bug.