Member Avatar for PixelandtheWolf

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

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
  • 367 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by PixelandtheWolf

Dani AI

Generated

reported two distinct rendering problems when using the Big Picture layout: a flicker/tearing when scrolling in IE11 and sections missing or clipped in older Safari. Those symptoms line up with long-standing browser compositing/painting differences around viewport-fixed backgrounds (how the browser repaints a fixed background vs. the scrolling content). (stackoverflow.com)

Practical, low-risk fixes to try (ordered by impact):

  • Force the page to use the BODY as the scroll container for affected IE builds (this often eliminates the IE repaint glitch). Example IE-targeted CSS:

    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  html { overflow: hidden; height: 100%; }
  body { overflow: auto; height: 100%; }
}

    Test any scripts that listen on the scroll event after this change. (stackoverflow.com)

  • Replace unreliable background-attachment: fixed with a fixed-position background layer you control (body::before or a dedicated fixed .bg element). For single-image pages this can be purely CSS; for per-section backgrounds, keep one fixed element and swap its background-image when sections enter view (IntersectionObserver or a small scroll handler). Example starter CSS:

    .section { position: relative; z-index: 0; }
.site-bg::before {
  content: "";
  position: fixed;
  inset: 0;
  background-size: cover;
  background-position: center;
  pointer-events: none;
  z-index: -1;
}

    This sidesteps both Safari and older IE quirks around background-attachment. (blog.crea64.net)

  • Use compositing hints with caution. transform: translateZ(0) or will-change: transform can sometimes reduce jitter but may also introduce new bugs (fixed-position elements or stacking can break), so bench-test thoroughly. (petersproblems.wordpress.com)

Quick checklist: reproduce on a real target OS/browser, test the html→body scroll-change first, try the fixed-layer approach for Safari, and prefer graceful degradation (background scrolls) on very old browsers. The links above show tests and code samples that have helped others in the same situation. (stackoverflow.com)

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.