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

Status: NEW

(Core :: CSS Parsing and Computation, defect)

Description

[Akhil]

Attachment: black.jpg

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.

Comment 1

[Chris Peterson [:cpeterson]]

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.

Comment 2

[Akhil]

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

Comment 3

[Daniel Holbert [:dholbert]]

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?

Comment 4

[Chris Peterson [:cpeterson]]

Attachment: screenshot-1-back.png

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.

Comment 5

[Chris Peterson [:cpeterson]]

Attachment: screenshot-2-front.png

Comment 6

[Chris Peterson [:cpeterson]]

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
---------------------

Comment 7

[Chris Peterson [:cpeterson]]

I should clarify: WebGL doesn't work in *Firefox* in my Windows VMs, but it does work in Chrome and IE.

Comment 8

[Akhil]

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

Comment 9

[Akhil]

Any solution for this?