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

Support Forum

Picture element displays no image if type="image/webp" entry is present.

Posted

I'm running the latest beta.

The jpg in a picture element will not display if there's also an entry containing type="image/webp".

Example: http://googlechrome.github.io/samples/picture-element/ (2nd image, butterfly)

Another example (my site): http://www.intercepteft.com/solutions/property_management.html

webP image displays properly in Chrome, jpg appears properly in any browser except FF beta.

I'm running the latest beta. The jpg in a picture element will not display if there's also an entry containing type="image/webp". Example: http://googlechrome.github.io/samples/picture-element/ (2nd image, butterfly) Another example (my site): http://www.intercepteft.com/solutions/property_management.html webP image displays properly in Chrome, jpg appears properly in any browser except FF beta.

Additional System Details

Installed Plug-ins

  • Adobe PDF Plug-In For Firefox and Netscape 11.0.9
  • Shockwave Flash 15.0 r0
  • Google Update
  • 5.1.30514.0
  • Picasa plugin
  • Citrix Online App Detector Plugin
  • VMware Remote Console and Client Integration Plug-in

Application

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

Extensions

  • ColorZilla 2.8.1 ({6AC85730-7D0F-4de0-B3FA-21142DD85326})
  • Console² 0.9 ({1280606b-2510-4fe0-97ef-9b5a22eafe80})
  • CSS Usage 0.3.3 (csscoverage@spaghetticoder.org)
  • CSS Viewer 1.0.5 ({026FBEEC-83F4-11E1-830D-14CD4724019B})
  • DownThemAll! 2.0.17 ({DDC359D1-844A-42a7-9AA1-88A850A938A8})
  • Extension Defender 1.0.3 ({281944CE-E7F4-4A43-A5D0-EAC0B3E71BFF})
  • FiddlerHook 2.4.8.3 (fiddlerhook@fiddler2.com)
  • Firebug 2.0.4 (firebug@software.joehewitt.com)
  • Firefox Old Version Update Hotfix 20140527.01.3 (firefox-hotfix@mozilla.org)
  • Microsoft .NET Framework Assistant 1.3.1 ({20a82645-c095-46ed-80e3-08825760534b})
  • Page Speed 1.12.9.2 ({e3f6c2cc-d8db-498c-af6c-499fb211db97})
  • Restartless Restart 9 (restartless.restart@erikvold.com)
  • Tab Mix Plus 0.4.1.5.1 ({dc572301-7619-498c-a57d-39143191b318})
  • Troubleshooter 1.1a (troubleshooter@mozilla.org)
  • Unhide Passwords 1.2.7.0 ({2e17e2b2-b8d4-4a67-8d7b-fafa6cc9d1d0})
  • Web Developer 1.2.5 ({c45c406e-ab73-11d8-be73-000a95be3b12})
  • YSlow 3.1.8 (yslow@yahoo-inc.com)
  • Adblock Plus 2.6.4 ({d10d0bf8-f5b5-c8b4-a8b2-2b9879e08c5d}) (Inactive)
  • CookieWatcher 0.9.4 ({a3b3130e-3221-11a6-8ea8-43e1dbcc0a12}) (Inactive)
  • Go-Mobile 2.2.6 (jid0-W5zY771zDsu5o7dTJ8KHm38w1xs@jetpack) (Inactive)
  • Logitech SetPoint 6.5 ({F003DA68-8256-4b37-A6C4-350FA04494DF}) (Inactive)
  • Status-4-Evar 2014.07.06.05 (status4evar@caligonstudios.com) (Inactive)
  • User Agent Changer 2.6.8 ({e968fc70-8f95-4ab9-9e79-304de2a66ee1}) (Inactive)
  • User Agent Quick Switch 0.5.2 (jid0-62jR3sq6mHTLknusEa92dfyvGcs@jetpack) (Inactive)
  • User Agent Switcher 0.7.3 ({e968fc70-8f95-4ab9-9e79-304de2a71ee1}) (Inactive)

Javascript

  • incrementalGCEnabled: True

Graphics

  • adapterDescription: AMD Radeon HD 5450
  • adapterDescription2:
  • adapterDeviceID: 0x68f9
  • adapterDeviceID2:
  • adapterDrivers: aticfx64 aticfx64 aticfx64 aticfx32 aticfx32 aticfx32 atiumd64 atidxx64 atidxx64 atiumdag atidxx32 atidxx32 atiumdva atiumd6a atitmm64
  • adapterDrivers2:
  • adapterRAM: 512
  • adapterRAM2:
  • adapterVendorID: 0x1002
  • adapterVendorID2:
  • direct2DEnabled: False
  • direct2DEnabledMessage: [u'tryNewerDriver', u'ATI Catalyst 14.6+']
  • directWriteEnabled: False
  • directWriteVersion: 6.2.9200.16571
  • driverDate: 4-17-2014
  • driverDate2:
  • driverVersion: 14.100.0.0
  • driverVersion2:
  • info: {u'AzureCanvasBackend': u'skia', u'AzureFallbackCanvasBackend': u'cairo', u'AzureContentBackend': u'cairo', u'AzureSkiaAccelerated': 0}
  • isGPU2Active: False
  • numAcceleratedWindows: 1
  • numTotalWindows: 1
  • webglRenderer: Google Inc. -- ANGLE (AMD Radeon HD 5450 Direct3D9Ex vs_3_0 ps_3_0)
  • windowLayerManagerRemote: True
  • windowLayerManagerType: Direct3D 11

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.cache.frecency_experiment: 1
  • browser.link.open_newwindow.restriction: 0
  • browser.places.smartBookmarksVersion: 7
  • browser.search.openintab: True
  • browser.search.suggest.enabled: False
  • browser.sessionstore.restore_on_demand: False
  • browser.sessionstore.upgradeBackup.latestBuildID: 20140929180120
  • browser.startup.homepage_override.buildID: 20140929180120
  • browser.startup.homepage_override.mstone: 33.0
  • browser.tabs.loadInBackground: False
  • browser.tabs.warnOnClose: False
  • dom.disable_window_status_change: False
  • dom.image.picture.enabled: True
  • dom.image.srcset.enabled: True
  • dom.mozApps.used: True
  • dom.report_all_js_exceptions: True
  • extensions.lastAppVersion: 33.0
  • font.internaluseonly.changed: True
  • general.useragent.extra.microsoftdotnet: (.NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E)
  • gfx.direct3d.last_used_feature_level_idx: 0
  • gfx.direct3d.prefer_10_1: True
  • javascript.options.strict: True
  • media.gmp-gmpopenh264.lastUpdate: 1412251327
  • media.gmp-gmpopenh264.version: 1.1
  • media.gmp-manager.lastCheck: 1412342237
  • network.cookie.prefsMigrated: True
  • places.database.lastMaintenance: 1412342234
  • places.history.expiration.transient_current_max_pages: 104858
  • plugin.disable_full_page_plugin_for_types: application/pdf
  • plugin.importedState: True
  • plugin.state.npadobeaamdetect: 0
  • privacy.donottrackheader.enabled: True
  • privacy.sanitize.migrateFx3Prefs: True
  • security.ssl3.ecdhe_ecdsa_rc4_128_sha: False
  • security.ssl3.ecdhe_rsa_rc4_128_sha: False
  • security.ssl3.rsa_des_ede3_sha: False
  • security.ssl3.rsa_rc4_128_md5: False
  • security.ssl3.rsa_rc4_128_sha: False
  • security.warn_viewing_mixed: False
  • storage.vacuum.last.index: 1
  • storage.vacuum.last.places.sqlite: 1411143732

Misc

  • User JS: No
  • Accessibility: No
cor-el
  • Top 10 Contributor
  • Moderator
16464 solutions 148535 answers

Helpful Reply

Did you enable the picture element and have set the dom.image.* prefs to true?

  • dom.image.picture.enabled
  • dom.image.srcset.enabled

With both of these set to true I'm not getting the image.

Did you enable the picture element and have set the dom.image.* prefs to true? *dom.image.picture.enabled *dom.image.srcset.enabled With both of these set to true I'm not getting the image.

Question owner

Thanks.

I suspect I have both those set since I was playing with srcset before picture. Picture allows me to use jpg and webP images, which is why I decided that was the best fit for me, despite later implementation.

I noticed from Fiddler2 (a packet sniffer), FF beta was downloading the webP image, but unable to display anything except the text from the alt tag. So apparently it's not checking for valid image types it can display and instead just using the media tags. So I'm still calling this a bug.

BTW, this does work properly if media tags are used, but for simple images where just the type differs is where the problem lies. The slider at the top of our home page has 3 sizes of jpg and 3 webp images and works nicely. http://www.intercepteft.com

I also noticed a difference in the Chrome vs Firefox implementation and prefer Chrome. If you resize the browser with Chrome, it'll grab the proper image on the fly. Firefox OTOH, needs a page reload to get the proper image for the page width, not a problem when going from wide to narrow, but going from narrow to wide could result in a low resolution image.

Thanks. I suspect I have both those set since I was playing with srcset before picture. Picture allows me to use jpg and webP images, which is why I decided that was the best fit for me, despite later implementation. I noticed from Fiddler2 (a packet sniffer), FF beta was downloading the webP image, but unable to display anything except the text from the alt tag. So apparently it's not checking for valid image types it can display and instead just using the media tags. So I'm still calling this a bug. BTW, this does work properly if media tags are used, but for simple images where just the type differs is where the problem lies. The slider at the top of our home page has 3 sizes of jpg and 3 webp images and works nicely. http://www.intercepteft.com I also noticed a difference in the Chrome vs Firefox implementation and prefer Chrome. If you resize the browser with Chrome, it'll grab the proper image on the fly. Firefox OTOH, needs a page reload to get the proper image for the page width, not a problem when going from wide to narrow, but going from narrow to wide could result in a low resolution image.

Modified by RSteinwand

Question owner

Sorry, I was mistaken. My home page only works because I removed the webP portion.

I had hoped I could add a work-around by adding media tags with a really low width (like min-width:300px), but no go.

So how do we officially bug this?

BTW, if srcset is disabled in config and picture is enabled, I do get an image, but it's only the fail-over image. Nothing else works in FF if webP images are used.

Sorry, I was mistaken. My home page only works because I removed the webP portion. I had hoped I could add a work-around by adding media tags with a really low width (like min-width:300px), but no go. So how do we officially bug this? BTW, if srcset is disabled in config and picture is enabled, I do get an image, but it's only the fail-over image. Nothing else works in FF if webP images are used.

Modified by RSteinwand

johns 0 solutions 1 answers

This looks like bug 1045532 -- Type selection doesn't currently work, but should before picture is enabled by default.

This looks like [https://bugzil.la/1045532 bug 1045532] -- Type selection doesn't currently work, but should before picture is enabled by default.

Question owner

Thanks John.

Saves me from having to do more.

Thanks John. Saves me from having to do more.

Question owner

I see this was fixed over a week ago, but I still can't view an image containing type=webP in latest Aurora if srcset is enabled.

I hate to ask for an ETA, but how long does it take for changes to make into mainstream? Do I have to install a nightly build?

I see this was fixed over a week ago, but I still can't view an image containing type=webP in latest Aurora if srcset is enabled. I hate to ask for an ETA, but how long does it take for changes to make into mainstream? Do I have to install a nightly build?
cor-el
  • Top 10 Contributor
  • Moderator
16464 solutions 148535 answers

Helpful Reply

This fix only landed on mozilla-central (see comment 12), so only the Nightly 36.0a1 builds have it so far.

This fix only landed on mozilla-central (see comment 12), so only the Nightly 36.0a1 builds have it so far.

Question owner

Thanks.

Thanks.