Skip to content

Commit

Permalink
Prevent interaction with blurry-image placeholder (#28090)
Browse files Browse the repository at this point in the history
The blurry image placeholder uses a transition to slowly fade the blur into the real image. When it's done, the blurry image is "hidden" via `opacity: 0` styles. Unfortunately, users can still interact with this blurry image, and because it overlays the entire image, can't interact with the real image.

Adding `pointer-events: none` seems to be the easiest fix. Other possibilities include adding a `transitionend` event (requires JS, and slow), or converting to a CSS animation (unsure of browser support and smoothness).
  • Loading branch information
jridgewell committed Apr 29, 2020
1 parent ad91624 commit c6e3be8
Showing 1 changed file with 1 addition and 0 deletions.
1 change: 1 addition & 0 deletions css/ampshared.css
Expand Up @@ -34,6 +34,7 @@

.i-amphtml-blurry-placeholder {
transition: opacity 0.3s cubic-bezier(0.0, 0.0, 0.2, 1) !important;
pointer-events: none;
}

/* layout=nodisplay are automatically hidden until JS initializes. */
Expand Down

0 comments on commit c6e3be8

Please sign in to comment.