2

I have a map which consists of 100 field divs and I want to change fields' box-shadow on hover, so I have the CSS code like:

.field:hover {
    box-shadow: inset 0px 0px 100px 0px rgba(255,0,0,0.3);
}

I noticed that when the field div is empty (< div class="field" >< /div >) the div's box-shadow changes instantly on hover and everything runs smoothly. However, if I put ANY content in that div (e.g. < div class"field" >some content< /div >) there is a visible delay between the moment I put the cursor on it and the moment it gets the box-shadow.

Another interesting thing I noticed is that even if I set the background-image on that div (< div class="field" style="background-image: url(image.jpg)" >< /div >) if it's empty it still runs faster than the div with no background image, but some content inside.

Basicly my question is - is there any way I can achieve the hover-state-change speed of the empty div (or at least close to that) on the div that has some content inside?

@edit:

So I couldn't really reproduce this "no-content vs content" difference on fiddle, but I figured out that the problem appears only when the field has some box shadow by default. And that I can show you: https://jsfiddle.net/azp0w668/2/

In my project the problem appears only when there is content inside the div (otherwise it runs smoothly), but here it seems to appear even when the div is empty, but only if it has box-shadow (I created a toggle button so you can see the difference)

Leszek Wiesner
  • 145
  • 9

1 Answers1

1

Nothing changes in the response speed of a hover pseudoClass based on whether or not there's content inside.

But, some common things to check for:

  • Make sure you're not applying a transition property somewhere
  • It's possible your content is somehow blocking the hover from hitting your container. You can test this by setting pointer-events:none on the inner content

Try adding padding to the bottom of your container and hovering that area. There should be no delay, and you can be sure it has something more to do with the content itself than the container.

UPDATE

I played with your fiddle for a moment and it actually appears to be an issue with the browser redrawing too many things or too many times when the hover'd element changes.

You can test this in your fiddle by removing the shadow from 4-6 boxes in the middle, and you'll notice the delay occurs on the boxes with no shadows as well. Invert the shadows and you'll see the 4-6 boxes that have shadows have no delay.

So the problem is too many individual shadows on the page at once, and the fix would be to reduce the number of shadows.

I'm not sure the details of your spec, but if it's possible to put a single shadow on a parent or overlaid element that can use a single shadow for several elements at once, rather than applying shadows to each one individually, that would help. Or perhaps you could make use of gradients or background images to create a shadow effect without requiring the use of the box-shadow property.

UPDATE 2

Found a bit of a hack that may help, using the border-image prop: https://stackoverflow.com/a/1249752/1120103

Community
  • 1
  • 1
relic
  • 1,662
  • 1
  • 16
  • 24
  • Neither of those appears to be the problem, but I noticed that the delay happens only when the fields have some box-shadow by default. Interesting thing is that when I tried to reproduce it on fiddle it would happen regardless of the content inside the div, but also only when there is default box-shadow on field divs. In my project there is box shadow by default on field divs, but I get the delay only when there is content in them. If they are either empty and with box-shadow or box-shadow-less and not empty - everything goes smooth. Hard to explain really. – Leszek Wiesner Jul 01 '16 at 22:11