Home Dashboard Directory Help

CSS parallax demo paint issues by keithclarkcouk


Status: 

Closed
 as External Help for as External


Type: Bug
ID: 1919720
Opened: 10/19/2015 12:44:23 PM
Access Restriction: Public
1
Workaround(s)
view
0
User(s) can reproduce this bug

Description

The following demo uses CSS 3D transforms to create the parallax scrolling effect without needing JavaScript:

http://keithclark.co.uk/articles/pure-css-parallax-websites/demo3/

The demo doesn't render correctly during or after scrolling in Edge. If you resize the browser window after scrolling the page appears to render correctly again.
Details
Sign in to post a comment.
Posted by Microsoft on 4/4/2016 at 7:35 PM
We've moved! This issue is now being tracked at https://developer.microsoft.com/microsoft-edge/platform/issues/5084491/
Posted by keithclarkcouk on 10/22/2015 at 1:57 AM
I have another test case for a blog post I'm working on: http://keithclark.co.uk/temp/pure-css-parallax-edge-test/. This also shows off the rendering issues but, strangely, it works in the the old Windows 10 TP release (IE11.0.10011.0) if you load the page and then reload the page (hit F5)
Posted by Microsoft on 10/19/2015 at 1:33 PM
Hello keithclarkcouk,

Thank you for your feedback. We will be investigating this issue further.

Best regards,
The Microsoft Edge Team
Sign in to post a workaround.
Posted by keithclarkcouk on 10/26/2015 at 3:51 AM
You can workaround this issue by setting a "null" transform `translateZ(0px)` on the parent element. In the case of my demo, that's the <body> element.

Here's a demo with the workaround (hack): http://keithclark.co.uk/temp/pure-css-parallax-edge-test-2/