SmartSprites

Remove background-image from :hover styles, where the same css selector without the :hover element uses the same Smart Sprite

Details

  • Type: New Feature New Feature
  • Status: Open Open
  • Priority: Minor Minor
  • Resolution: Unresolved
  • Affects Version/s: None
  • Fix Version/s: None
  • Component/s: None
  • Labels:
    None

Description

There is a weird new issue in Chrome that causes hover images generated with Smart Sprites to flicker

http://stackoverflow.com/questions/8035366/image-flickering-on-mouseover-even-when-sprites-are-used-for-hover-image

Basically - when Chrome sees the same background-image style appear on both the normal and :hover styles, it re-fetches the image when the element is hovered on. Until the image re-downloads, you see a blank image - very visually disturbing.

The work around is not to include the background-image style in the css of the :hover style, assuming the same background-image is already included in the normal, un-hovered style.

(As a work around for now, I'm using a post-build script that strips background-image from all :hover style - https://gist.github.com/1354590)

Activity

Hide
Stanisław Osiński added a comment -

Thanks for the report and a workaround, Ron! Some recent comments on the StackOverflow question suggest that the latest update to Chrome (15.0.874.106) fixes the issue.

Show
Stanisław Osiński added a comment - Thanks for the report and a workaround, Ron! Some recent comments on the StackOverflow question suggest that the latest update to Chrome (15.0.874.106) fixes the issue.
Hide
Ron Gross added a comment -

Unfortunately it's not that simple (I'm ripper234 on Stack Overflow - I reported that it's "resolved in Chrome 15.0.874.106", but it appears the problem is simply not deterministic.

Please read my latest comment on my answer: http://stackoverflow.com/questions/8035366/image-flickering-on-mouseover-even-when-sprites-are-used-for-hover-image/8057250#8057250

Show
Ron Gross added a comment - Unfortunately it's not that simple (I'm ripper234 on Stack Overflow - I reported that it's "resolved in Chrome 15.0.874.106", but it appears the problem is simply not deterministic. Please read my latest comment on my answer: http://stackoverflow.com/questions/8035366/image-flickering-on-mouseover-even-when-sprites-are-used-for-hover-image/8057250#8057250

People

Vote (0)
Watch (0)

Dates

  • Created:
    Updated: