Fixed background image not sized to viewport when using transforms

Issue #11841111 • Assigned to Christian F.


Paul ..
Apr 30, 2017
This issue is public.
Found in
  • Microsoft Edge
  • Firefox
Found in build #
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

The background of a page is set using a background image. The size is set to cover, the attachment to fixed and the position to center.

A blurred version of the image is created, and is used in an overlay box that is positioned somewhere on the page. The same css properties are set on the overlay box. This creates the illusion of blurring what’s behind the box (since backdrop-filter is not widely available yet).

When this overlay box has any sort of transformation on it, the background image is no longer fixed with regard to the viewport but fixed with regard to the element’s bounding box.

See the attached repro.html file for a demonstration of the problem. Note: this file uses imgur for image hosting, and contains JavaScript for toggling classes.


1 attachment

Comments and activity

  • Microsoft Edge Team

    Changed Assigned To to “Steven K.”

    Changed Assigned To to “Bogdan B.”

    Changed Assigned To to “Christian F.”

You need to sign in to your Microsoft account to add a comment.

Sign in