Member Avatar for PixelandtheWolf

One of my websites is based off of the HTML5 Big Picture Template:
iamepic.today

Within this design, I am noticing two interesting effects taking place, one within Internet Explorer 11 and the Other Being Safari 5.1.7.

Within Internet Explorer 11, when you scroll through the different sections from top to bottom you will see a weird flickering effect. (This definitely occurs when you scroll fast.) I've read in articles that the -webkit-backface-visibility needs to be set to hidden, but that didn't solve the problem for me. I've also read that it could be a performance issue with that specific version of Internet Explorer.

Within Safari, some of the section elements don't even display, or they're cut off.

Anyone have any ideas on how to fix these problems?

  • 1 Contributor
  • 1 Reply
  • 327 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by PixelandtheWolf
Member Avatar for PixelandtheWolf

Edit: I recently found the reason of why the page has a weird flickering effect in Internet Explorer. Apparently it's a bug within Internet Explorer 11 and 10 and only if you use Windows 8.1 (and maybe even Windows 8.0).
This has to do with the background attachment in each section being set to fixed.

Now I have two problems with this,
One, if I remove the the fixed element it doesn't necessarily solve the problem in it's entirety. Your result will be a weird glitchy line effect when scrolling.

Second, this issue doesn't occur on the HTML5UP Big Picture site online, and they have their background elements set to fixed.

Furthermore, you can prevent the flickering effect if you turn off smooth scrolling in the settings -> advanced tab.

Any help is appreciated!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.