X
Tap here to go to the mobile version of the site.

Support Forum

SVG blur looks ugly in firefox

Posted

I had filed this question earlier in stack overflow but couldn't get an answer. http://stackoverflow.com/questions/17146628/svg-blur-very-choppy-in-firefox

Please check the link out as it contains pictures to show you what really is going on. To summarize, I am using svg blur filter in an image like the following:

<svg id="blurjs-10">

  <filter id="blur10px">
     <feGaussianBlur stdDeviation="10" in="SourceGraphic">
  </filter>

</svg>

In "firefox on windows" the blur quality with the above code is really really bad. To improve this I used filterRes tag. It works better but not completely solved. Chrome, safari and even IE10 display blur nicely.

I had filed this question earlier in stack overflow but couldn't get an answer. http://stackoverflow.com/questions/17146628/svg-blur-very-choppy-in-firefox Please check the link out as it contains pictures to show you what really is going on. To summarize, I am using svg blur filter in an image like the following: <svg id="blurjs-10"> <filter id="blur10px"> <feGaussianBlur stdDeviation="10" in="SourceGraphic"> </filter> </svg> In "firefox on windows" the blur quality with the above code is really really bad. To improve this I used filterRes tag. It works better but not completely solved. Chrome, safari and even IE10 display blur nicely.

Additional System Details

Installed Plug-ins

  • Next Generation Java Plug-in 10.25.2 for Mozilla browsers
  • NPRuntime Script Plug-in Library for Java(TM) Deploy
  • Google Talk Plugin Video Accelerator version:0.1.44.29
  • Version 4.1.3.13728
  • Shockwave Flash 11.7 r700
  • Google Update
  • Adobe PDF Plug-In For Firefox and Netscape 11.0.03
  • Raidcall plugin
  • Pando Web Plugin
  • NPWLPG
  • VLC media player Web Plugin 2.0.0

Application

  • Firefox 23.0
  • User Agent: Mozilla/5.0 (Windows NT 6.1; rv:23.0) Gecko/20100101 Firefox/23.0
  • Support URL: http://support.mozilla.org/1/firefox/23.0/WINNT/en-US/

Extensions

  • Firebug 1.11.4 (firebug@software.joehewitt.com)
  • FirePHP 0.7.2 (FirePHPExtension-Build@firephp.org)
  • Test Pilot 1.2.2 (testpilot@labs.mozilla.com)
  • Troubleshooter 1.1a (troubleshooter@mozilla.org)
  • AVG Do Not Track 12.0.0.2189 ({F53C93F1-07D5-430c-86D4-C9531B27DFAF}) (Inactive)
  • AVG Safe Search 12.0.0.2222 ({1E73965B-8B48-48be-9C8D-68B920ABC1C4}) (Inactive)

Javascript

  • incrementalGCEnabled: True

Graphics

  • adapterDescription: ATI Mobility Radeon HD 4500/5100 Series
  • adapterDescription2:
  • adapterDeviceID: 0x9553
  • adapterDeviceID2:
  • adapterDrivers: aticfx32 aticfx32 atiumdag atidxx32 atiumdva
  • adapterDrivers2:
  • adapterRAM: 512
  • adapterRAM2:
  • adapterVendorID: 0x1002
  • adapterVendorID2:
  • direct2DEnabled: True
  • directWriteEnabled: True
  • directWriteVersion: 6.2.9200.16492
  • driverDate: 10-12-2011
  • driverDate2:
  • driverVersion: 8.902.0.0
  • driverVersion2:
  • info: {u'AzureCanvasBackend': u'direct2d', u'AzureFallbackCanvasBackend': u'cairo', u'AzureContentBackend': u'direct2d'}
  • isGPU2Active: False
  • numAcceleratedWindows: 1
  • numTotalWindows: 1
  • webglRenderer: Google Inc. -- ANGLE (ATI Mobility Radeon HD 4500/5100 Series)
  • windowLayerManagerType: Direct3D 10

Modified Preferences

  • accessibility.typeaheadfind.flashBar: 0
  • browser.cache.disk.capacity: 358400
  • browser.cache.disk.smart_size.first_run: False
  • browser.cache.disk.smart_size.use_old_max: False
  • browser.cache.disk.smart_size_cached_value: 358400
  • browser.places.smartBookmarksVersion: 4
  • browser.startup.homepage_override.buildID: 20130625125232
  • browser.startup.homepage_override.mstone: 23.0
  • browser.tabs.warnOnClose: False
  • dom.mozApps.used: True
  • dom.w3c_touch_events.expose: False
  • extensions.lastAppVersion: 23.0
  • font.internaluseonly.changed: True
  • gfx.direct3d.last_used_feature_level_idx: 0
  • gfx.direct3d.prefer_10_1: True
  • network.cookie.prefsMigrated: True
  • places.database.lastMaintenance: 1372423780
  • places.history.expiration.transient_current_max_pages: 79610
  • plugin.disable_full_page_plugin_for_types: application/pdf
  • plugin.importedState: True
  • privacy.sanitize.migrateFx3Prefs: True
  • security.warn_viewing_mixed: False
  • storage.vacuum.last.index: 1
  • storage.vacuum.last.places.sqlite: 1371144900

Misc

  • User JS: No
  • Accessibility: No

Question owner

If you want more examples: http://naya.com.np/?p=photo.13

If the photo opens in a modal, the background is blurred. If not try clicking the "open picture in modal" button at the bottom menu bar.

The blurred background looks really ugly in windows firefox. However in chrome, safari the background blur is really elegant.

If you want more examples: http://naya.com.np/?p=photo.13 If the photo opens in a modal, the background is blurred. If not try clicking the "open picture in modal" button at the bottom menu bar. The blurred background looks really ugly in ''windows firefox''. However in chrome, safari the background blur is really elegant.

Modified by kwarc