Open Bug 1189340 Opened 9 years ago Updated 2 years ago

Black artifacts when hovering "flip" demo, with CSS 3D Transforms

Categories

(Core :: CSS Parsing and Computation, defect)

39 Branch
Unspecified
Windows
defect

Tracking

()

Tracking Status
firefox39 --- affected
firefox40 --- affected
firefox41 --- affected
firefox42 --- affected

People

(Reporter: akhil, Unassigned)

References

()

Details

(Keywords: reproducible)

Attachments

(3 files)

Attached image black.jpg (deleted) —
User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.107 Safari/537.36 Steps to reproduce: I am creating a flip effect with CSS3. Flip is working fine. Creating 6 square boxes with bootstrap for showing services of the company. Using this tutorial http://davidwalsh.name/css-flip. Actual results: When flipped position (back side of the flip content when mouse over) there is some text. when mouse over, the gap between the two lines or 2 paragraphs filled with black color. That color is appearing only for a second(flashing) Expected results: That black color should not appear.
Thanks for reporting this problem, Akhil. Can you share a test case with the HTML and CSS you used to reproduce this problem? http://jsfiddle.net/ is an easy way to demonstrate your code.
Component: Untriaged → CSS Parsing and Computation
Thanks Chris for the reply, Please check the fiddle https://jsfiddle.net/0xpvykrp/ its working fine in Chrome and IE10, also working smoothly in FF but this black color flashing is the only issue. I am using FF39.0
Summary: CSS flip Issue with Firefox mouse-hover → Black artifacts on "flip Issue with Firefox mouse-hover
Summary: Black artifacts on "flip Issue with Firefox mouse-hover → Black artifacts when hovering "flip" demo, with 3D Transforms
I can't reproduce the issue locally (using Firefox 39 on Linux). But, given that the testcase uses "transform-style: preserve-3d" with transitioned transforms, I'll bet this is a bug with 3D transforms similar to testcase 3 over on bug 1187209. Akhil, what OS are you seeing this issue on? Also, could you type "about:support" into your URL bar, and copy the "Graphics" section of that page & paste it into a comment here?
Summary: Black artifacts when hovering "flip" demo, with 3D Transforms → Black artifacts when hovering "flip" demo, with CSS 3D Transforms
Attached image screenshot-1-back.png (deleted) —
I can't reproduce this problem on OS X, but I can reproduce it with Firefox Beta 40 and Nightly 42 in my Windows 10 VM. See the attached screenshots.
Attached image screenshot-2-front.png (deleted) —
Here is about:support for my Windows VM. Note that WebGL does not seem to work in my Windows VMs (8.1 and 10). See the "WebGL Renderer: Blocked for your graphics card because of unresolved driver issues." message below. Application Basics ------------------ Name: Firefox Version: 40.0 Build ID: 20150727174134 Update Channel: beta User Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:40.0) Gecko/20100101 Firefox/40.0 Multiprocess Windows: 0/1 (default: false) Crash Reports for the Last 3 Days --------------------------------- All Crash Reports Extensions ---------- Name: User Agent Switcher Version: 0.7.3.1-signed Enabled: true ID: {e968fc70-8f95-4ab9-9e79-304de2a71ee1} Name: NoScript Version: 2.6.9.32 Enabled: false ID: {73a6fe31-595d-460b-a920-fcc0f8843232} Graphics -------- Adapter Description: VMware SVGA 3D Adapter Drivers: vm3dum64 vm3dum Adapter RAM: 1024 Asynchronous Pan/Zoom: none Device ID: 0x0405 Direct2D Enabled: Blocked for your graphics card because of unresolved driver issues. DirectWrite Enabled: false (10.0.10166.0) Driver Date: 7-29-2014 Driver Version: 8.14.1.51 GPU #2 Active: false GPU Accelerated Windows: 1/1 Direct3D 11 WARP (OMTC) Subsys ID: 040515ad Supports Hardware H264 Decoding: false Vendor ID: 0x15ad WebGL Renderer: Blocked for your graphics card because of unresolved driver issues. windowLayerManagerRemote: true AzureCanvasBackend: skia AzureContentBackend: cairo AzureFallbackCanvasBackend: cairo AzureSkiaAccelerated: 0 Important Modified Preferences ------------------------------ accessibility.typeaheadfind.flashBar: 0 browser.cache.disk.capacity: 358400 browser.cache.disk.filesystem_reported: 1 browser.cache.disk.smart_size.first_run: false browser.cache.disk.smart_size.use_old_max: false browser.cache.frecency_experiment: 2 browser.download.importedFromSqlite: true browser.download.manager.alertOnEXEOpen: true browser.places.smartBookmarksVersion: 7 browser.sessionstore.upgradeBackup.latestBuildID: 20150730030208 browser.startup.homepage_override.buildID: 20150727174134 browser.startup.homepage_override.mstone: 40.0 browser.tabs.remote.autostart.2: false dom.apps.reset-permissions: true dom.mozApps.used: true extensions.lastAppVersion: 40.0 font.internaluseonly.changed: false gfx.driver-init.appVersion: 42.0a1 gfx.driver-init.deviceID: 0x0405 gfx.driver-init.driverVersion: 8.14.1.51 gfx.driver-init.feature-d2d: false gfx.driver-init.feature-d3d11: false gfx.driver-init.status: 2 media.eme.enabled: false media.gmp-gmpopenh264.enabled: true media.gmp-gmpopenh264.lastUpdate: 1433802626 media.gmp-gmpopenh264.version: 1.4 media.gmp-manager.buildID: 20150730030208 media.gmp-manager.lastCheck: 1438326216 media.gmp.log.dump: true media.gmp.log.level: 0 media.hardware-video-decoding.failed: false network.cookie.prefsMigrated: true network.predictor.cleaned-up: true places.database.lastMaintenance: 1437760200 places.history.expiration.transient_current_max_pages: 53674 plugin.disable_full_page_plugin_for_types: application/pdf plugin.importedState: true privacy.sanitize.migrateFx3Prefs: true privacy.trackingprotection.enabled: true security.sandbox.content.tempDirSuffix: {ef26efed-da09-49c5-979a-65ad0240cb84} storage.vacuum.last.index: 1 storage.vacuum.last.places.sqlite: 1436550192 Important Locked Preferences ---------------------------- JavaScript ---------- Incremental GC: true Accessibility ------------- Activated: false Prevent Accessibility: 0 Library Versions ---------------- NSPR Expected minimum version: 4.10.8 Version in use: 4.10.8 NSS Expected minimum version: 3.19.2 Basic ECC Version in use: 3.19.2 Basic ECC NSSSMIME Expected minimum version: 3.19.2 Basic ECC Version in use: 3.19.2 Basic ECC NSSSSL Expected minimum version: 3.19.2 Basic ECC Version in use: 3.19.2 Basic ECC NSSUTIL Expected minimum version: 3.19.2 Version in use: 3.19.2 Experimental Features ---------------------
Status: UNCONFIRMED → NEW
Ever confirmed: true
OS: Unspecified → Windows
I should clarify: WebGL doesn't work in *Firefox* in my Windows VMs, but it does work in Chrome and IE.
Hi Daniel, I am Using Windows 7, Please check the Graphics section below.. Graphics Adapter Description NVIDIA Quadro FX 580 Adapter Drivers nvd3dumx,nvwgf2umx,nvwgf2umx nvd3dum,nvwgf2um,nvwgf2um Adapter RAM 512 Asynchronous Pan/Zoom none Device ID 0x0659 Direct2D Enabled Blocked for your graphics driver version. Try updating your graphics driver to version 182.65 or newer. DirectWrite Enabled false (6.2.9200.17292) Driver Date 7-14-2009 Driver Version 8.15.11.9038 GPU #2 Active false GPU Accelerated Windows 1/1 Direct3D 11 WARP (OMTC) Subsys ID 063a10de Vendor ID 0x10de WebGL Renderer Blocked for your graphics driver version. Try updating your graphics driver to version 182.65 or newer. windowLayerManagerRemote true AzureCanvasBackend skia AzureContentBackend cairo AzureFallbackCanvasBackend cairo AzureSkiaAccelerated 0
Any solution for this?
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: