Using Object to load svg has issue in chrome they get reloaded when hide/show
Reported by
tawfi...@gmail.com,
May 2 2016
|
|||||||
Issue descriptionUserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2486.0 Safari/537.36 Edge/13.10586 Example URL: https://plnkr.co/edit/0roYQy45MPQ2SH3HNkPa?p=preview Steps to reproduce the problem: 1. use object tags to load svg's 2. try to hide/show objects parent div using css display What is the expected behavior? the objects need to be loaded together not one by one. What went wrong? the object tags loaded one by one and when set their parent div display property to none, then to block the object tags get reloaded. Please run this Plunker on chrome https://plnkr.co/edit/0roYQy45MPQ2SH3HNkPa?p=preview see how svg using object tag behave. first they get loaded one by one, also when hide/show their parent div they get reloaded again compare the behavior between using img tag and object tag. Does it occur on multiple sites: Yes Is it a problem with a plugin? No Did this work before? No Does this work in other browsers? Yes Chrome version: 50.0.2661.94 Channel: stable OS Version: 10.0 Flash Version: Shockwave Flash 21.0 r0
,
May 6 2016
,
Sep 10 2016
I've noticed the same problem and created a stripped down test case similar to the one tawfi reported: https://jsfiddle.net/alexteg/akpmefxs/ IE, Edge, FF, Safari all don't refetch the SVGs and render nearly instantly, while for Chrome it takes nearly 10 seconds to show the same 68 SVGs in <object> elements. All these browsers including Chrome show the same SVGs practically instantly without reloading them if <img> i used instead. Even though same SVGs are already visible in <img> elements Chrome still refetches them to show them in <object>. Looking in the DevTools Network tab it seems like Chrome fetches the SVGs as documents instead of images if they are loaded in an <object>. Not only does Chrome refetch the SVGs in <object> when they are shown after being hidden with display: none;, but it also seems like it is much slower to fetch SVGs in <object> (around 3700ms for 68 SVGs) compared to <img> (around 150ms for the same 68 SVGs). Additionally the UI thread locks for several seconds (~4200ms for 68 SVGs) after the it has fetched the SVGs. During that time RAM & CPU usage also spikes (RAM usage doubled for that Chrome process from ~250 MB to 500MB) and CPU utilizes 100% of one core. I can reproduce the problem both on Mac & Windows in both Chrome 53.0.2785.101 and 55.0.2852.1 canary builds, even though the latter canary build seems faster, but still refetches the SVGs and locks the UI for a while.
,
Sep 11 2016
Thanks for a detailed report! I ran a trace session on the TC, and it seemed to indicate that environment setup - WindowProxy:initialize and descendants taking a big share of the time (several milliseconds! Oftentimes with non-trivial time in GC-related activities.) Attempting to adjust components a bit to reflect these findings.
,
Aug 28 2017
,
Aug 28 2017
,
Aug 28
This issue has been Available for over a year. If it's no longer important or seems unlikely to be fixed, please consider closing it out. If it is important, please re-triage the issue. Sorry for the inconvenience if the bug really should have been left as Available. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Aug 28
I would like to cast my vote that it's important. For me the main issue is not the speed, but the lack of image after display:none; then display:not-none;. Though the speed is clearly a problem too. This issue has forced me to use inline SVG in many places where I might have used an <object>.
,
Aug 28
|
|||||||
►
Sign in to add a comment |
|||||||
Comment 1 by dtapu...@chromium.org
, May 2 2016