Page MenuHomePhabricator

CSS rule causes blue background for chrome users
Closed, InvalidPublic

Description

Author: joeysmith

Description:
screenshot of bug

http://bits.wikimedia.org/en.wikipedia.org/load.php?debug=false&lang=en&modules=ext.wikihiero%7Cmediawiki.legacy.commonPrint%2Cshared%7Cskins.vector&only=styles&skin=vector&* is a WP CSS stylesheet with a very odd bug in it, that is beginning to bite more and more Chrome users - it has the same two 'background-image' rules, one right after the other, on 3 nodes: div#content, #mw-head-base, and div#footer:

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABhJREFUeF4FwTEBAAAAgjD7FzESWfjYdgwEoAJ4lTsaxgAAAABJRU5ErkJggg==);background-image: url(//bits.wikimedia.org/skins-1.18/vector/images/border.png?2011-09-19T16:11:40Z)!ie;

Recent Chrome ignores the second background-image rule and thus gives an ugly blue tint behind the aforementioned nodes (see attachment)


Version: unspecified
Severity: minor
URL: http://code.google.com/p/chromium/issues/detail?id=113711

Attached:

2012-02-20_1224.png (601×828 px, 73 KB)

Details

Reference
bz34551

Event Timeline

bzimport raised the priority of this task from to Medium.Nov 22 2014, 12:15 AM
bzimport set Reference to bz34551.
bzimport added a subscriber: Unknown Object (MLST).

(In reply to comment #0)

Recent Chrome ignores the second background-image rule and thus gives an ugly
blue tint behind the aforementioned nodes (see attachment)

Can you be a bit more specific about this? Which version of Chrome are you using and on which OS?

those elements have; background-repeat: repeat-y; after those statements.

Judging from the screenshot, the browser acts as if repeat-x is set as well, possibly it's (incorrectly) ignoring all CSS elements after the line with the !ie hack ?

joeysmith wrote:

It's not the '!ie' hack - I've confirmed that Chrome exhibits the same behaviour even if you load a version of the stylesheet without this hack. However, it does appear to be related to zoom level.

sertmann wrote:

I'm having the same issue with 18.0.1025.39 beta-m on Windows 7

This is a Chrome bug introduced in Chrome 18. There is nothing wrong with the CSS, as any permutation of the CSS rule results in the bug being displayed. In essense, Chrome seems to ignore or mis-interpret the repeat-x/y attributes when the zoom level is below 100%. Short term fix: use 100% zoom level. There is nothing we can do about it, so I'm closing this as INVALID.

  • Bug 34444 has been marked as a duplicate of this bug. ***
  • Bug 36082 has been marked as a duplicate of this bug. ***
  • Bug 36219 has been marked as a duplicate of this bug. ***

chrisd857 wrote:

Chrome seems to have fixed the bug. (on Windows XP)