106748 2013-01-13 16:28:42 -0800 SVG Elements not in view on page load do not display 2013-01-14 05:36:16 -0800 1 1 1 Unclassified WebKit SVG 528+ (Nightly build) All All RESOLVED DUPLICATE 106221 http://jsfiddle.net/yY7QD/2/ P2 Major --- 1 kobitate94 webkit-unassigned fmalita pdr schenney zimmermann oldest_to_newest 806023 0 kobitate94 2013-01-13 16:28:42 -0800 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> 806283 1 fmalita 2013-01-14 05:33:11 -0800 *** This bug has been marked as a duplicate of bug 106221 *** 806285 2 fmalita 2013-01-14 05:36:16 -0800 Thanks for the report Kobi. This is a known issue with filter results caching, hopefully soon to be fixed.