Skip to content
This repository

Background image does not scale with browser zoom #79

Open
lojjic opened this Issue September 28, 2010 · 29 comments
Jason Johnston
Owner

See http://css3pie.com/forum/viewtopic.php?f=3&t=183

When using the browser zoom function, the background image(s) do not get scaled to match the zoom factor.

Sebastien Barre

+1, would love to see that fixed.
Actually even at 100%, my background image doesn't quite render the same when PIE is on or off. When it's on, the first column of pixels is shifted to the left, and appears to the right.

ezekielf

Would also love to see this fixed. Then we could starting using PIE on our site immediately.

Sebastien Barre

Not in PIE 1.0b3 I guess...

Evan

Same problem.

Rhys Evans

still getting same problem with latest beta version

Matt Chandler

Do any of you have some example markup or a URL that I can look at this is having this issue? I'm having some trouble recreating it on my machine.

EDIT: Nevermind! I got it to break on my machine. Hopefully a fix will be ready soon!

hsimon
hsimon commented June 08, 2011

is there any fix or a workaround available for this problem?

Matt Chandler

@hsimon There is not a fix yet (mostly because of lack of working on the issue.) I will try to put my focus back on this and get a patch going.

hsimon
hsimon commented June 09, 2011

@mkchandler cool, that'd be awesome! thank you so much

artifactdev

Hopefully this could be fixed soon, so I wouldn't have to kick pie out of the project I'm working on.

pplschmp

I am having the same issue, please oh please come up with a solution quickly. My issue is in IE7--the PIE features do not work when zoomed. It is interesting as this one works when zoomed: http://fetchak.com/ie-css3/ I would use this, but need gradient support--please help site going live soon!!!!!!!!!!!!!!!!!!!

Jason Johnston
Owner
lojjic commented June 22, 2011

@pplschmp: you say that Fetchak's script handles zooming propertly... however when I go to that page in IE and change the zoom I see the exact same issue occur. Screenshot: http://cl.ly/15003j3B1F193S3H2g2E -- Am I missing something?

pplschmp

Ah yes, the image does tile, but at least the boxes move with the text. Sorry I missed the cat picture tiling.

artifactdev

Whats the actual point on this issue? I think it should be fixed soon as possible or better i hope for this.

artifactdev

Sorry that I'm asking all the time but isn't there a fix in work? I think this is a fatal showstopper in relation to accessibility statement.

Jason Johnston lojjic referenced this issue from a commit September 05, 2011
Partial fix for issue #79: explicitly set the size of the background …
…image fill tile in pixels so that IE will automatically adjust it to the user's zoom level.
d97c930
Paul Young

Would also like to see this fixed.

Jason Johnston
Owner

For the folks following this ticket: the above commit seems to fix this issue entirely in IE8. IE7 seems to have a related zoom problem that affects the size of the entire rendering, but its background images are at least now sized consistently.

Assistance in testing this is welcomed. You'll have to pull the latest master code and build it.

Yann

Is the fix included in 1.0beta5? I believe I just ran into this issue... Thanks!

Lyoshi

Is there any news on this issue? Thanks in advance.

Toby Stokes

This fix wasn't included in 1.0beta5 - but I just patched in d97c930 to the 1.0beta5 release to see if it works, and I can confirm it does fix for IE8. IE7 still a bit bonkers, but no worse than without this patch.
I can't push this back to the beta branch, but if anyone wants just the compiled .htc, they can get it here: http://cl.ly/1F1W1F43263m3f1h0l07

Kevin Crawford

Thanks for providing the HTC file--worked like a charm. Hope you guys can patch that into a new beta soon.

Jason Johnston lojjic referenced this issue from a commit September 05, 2011
Partial fix for issue #79: explicitly set the size of the background …
…image fill tile in pixels so that IE will automatically adjust it to the user's zoom level.
9799198
Lyoshi

Thanks for the fix, I really appreciate it. However, this will work only on IE8. Stand-alone IE7 is still completely broken when zoomed, and it's a big issue for a serious website. We use PIE on a lots of websites with millions of users, and we are thinking about completely dropping PIE because of IE7 zoom issue, or dropping PIE support for IE7 at least, after QA Team informed us about this issue. I've tried all PIE versions, even PIE 2.0, and all versions have a same problem.

Jason Johnston
Owner

@Lyoshi Yes we're aware that IE7 zooming is still broken, hence the term "Partial fix" in the commit message. If you are able to help fix the issue it would be greatly appreciated. Might be more cost effective for you to invest a little time helping find a fix than to completely drop your usage and switch to some other approach.

Lyoshi
Lyoshi commented May 06, 2012

Unfortunately JS/VML is not my area of expertise, however I can help with testing. I didn't want to sound harsh, just wanted to point out that this particular bug is probably one of the most problematic one for big corporate websites. PIE is great and keep up the good work. Thank you.

Jason Johnston
Owner
lojjic commented May 12, 2012

The above commit adds some adjustment for the zoom ratio in IE7's position calculations. It's not 100% accurate due to what I can only guess are rounding issues, but it's at worst a pixel or two off rather than hundreds of pixels now.

Lyoshi
Lyoshi commented May 25, 2012

Thanks a lot, Jason! Glad this fix was included in 1.0.0 release.

crohde7707

So to apply these fixes, i would have to load the extra js files? right now i am only including the PIE.htc file

Jason Johnston
Owner

@crohde7707 I don't know what you're asking -- this fix was in the 1.0.0 release, nothing additional to be done.

crohde7707

Sorry if i wasnt clear.. My issue is im loading a background-image on an element, and also adding a background-color, using pie to round the background color so it wont show behind the rounded button. But when i zoom in, it doesnt keep the image in place and pixilate it like it should, instead it shows more of the sprite image im using (or less if i zoom out). Im using 1.0.0. and im seeing this in both IE 8 and 7

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.