Transitioning background image choppy in Chrome

HTML & CSS
1

I have an image needs to be larger than the area set for viewing that image. I’m trying to come up with a reliable way to view different portions of that image via a smooth transition. Currently, I have something that works nicely in Firefox, but is very choppy in Chrome.

The div that displays the image has the id of “navViewer” and starts out with the class=“topPosition”. When the button is clicked, Javascript is used to toggle between assigning “topPosition” and “botPosition” to that div. These two classes each have a setting for the position of the background image and set a transition time.

Is there something that can be done so that the transition works smoothly in Chrome?

One thing I tried that had no effect: adding the following line to #navViewer:

transform: translateZ(0);

There are mentions, in other questions on this issue, of forcing the Chrome browser to use hardware acceleration, and the above was said to be a hack to cause this to happen. But either the suggestion is obsolete, or my simply adding it to #navViewer was incorrect/naive.

The goal is to be able to view (with nice transitions) different areas of an image, where the image is much larger than the container that displays the image. I’d like to do this without scrollbars, just a click to a button. If there is a different scheme to use besides using a background image and changing its position via assigning different classes, I’d love to hear the suggestion.

Here is the code.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>TransitionQuestion</title>
    <style>
      #navViewer {
        width: 900px;
        height: 500px;
        border: 1px solid;
        background-size: 900px;
        background-image: url('http://adonax.com/main/images/Cheryl.jpg');
      }
      .topPosition {
        background-position: 0px 0px;
        transition: background-position 1s;
      }
      .botPosition {
        background-position: 0px -625px;
        transition: background-position 1s;
      }
    </style>
</head>
<body>
  <button id="goNext">next View</button>
  <div id="navViewer" class="topPosition"> </div>

  <script>
    const viewer = document.querySelector("#navViewer");
    const nextButton = document.querySelector("#goNext");
    nextButton.addEventListener("click", goNext, false);

    var positionIsAtTop = true;

    function goNext() {
      if (positionIsAtTop) {
        viewer.className = "botPosition";
      } else {
        viewer.className = "topPosition"
      }
      positionIsAtTop = !positionIsAtTop;
    }
  </script>
</body>
</html>
2

You don’t really want to animate background-position if you can help it but rather use transforms as they are more performant.

Here’s an old demo of mine that was originally just a hover example but I’ve added a click to toggle instead.

It produces much the same effect and I’m sure you can modify it to your needs…

1 Like
3

I added it to your example for testing.

1 Like
4

Thanks! This works very smoothly on Chrome as well as Firefox.

I am still relatively new to front-end coding, and will have to examine the code more closely. My goal is to have something set up where I can integrate with a Spring stack–a backend database will provide the img url and the values to be used for the scrolling destinations, and these will be delivered via templating engine Thymeleaf. Thymeleaf provides a way to drop strings into Javascript, so I will likely use some scheme using that capability.

Is there a way to mark this question as solved? I’m not seeing it.

I haven’t gone through the process of setting up something on CodePen and including it in a post. Does SitePoint have instructions on how to do this?

2 Likes
5

There’s not a specific way to mark as solved other than saying it out loud :slight_smile:

We generally leaves threads open for a while in case others have better solutions even though you may have moved on by then.:slight_smile:

No Codepen is not related to Sitepoint but is very useful for demos. Codepen is free to use for personal use and you just have to sign up. Once you have signed up you can create your demos on codepen and all you have to do to embed them in a post here is to paste the url of the codepen (from its address bar). It’s as simple as that and makes it easier to get help with problems :wink:

2 Likes
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.