Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

IE backslash hack on .img-responsive stretches images in IE<11 #13996

Closed
isherwood opened this issue Jun 30, 2014 · 19 comments
Closed

IE backslash hack on .img-responsive stretches images in IE<11 #13996

isherwood opened this issue Jun 30, 2014 · 19 comments
Labels
css
Milestone
v3.3.0

Comments

@isherwood
Copy link

A width statement on .img-responsive stretches images beyond their pixel dimensions in IE <= 10. It wasn't there before v3.2.0, and I can't seem to find any explanation or discussion of the issue.

.img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img { width: 100% \9; }

See http://jsfiddle.net/isherwood/eLQqW.
@mdo
Copy link
Member

mdo commented Jun 30, 2014

It was added for SVG images, fixing #10073.

@isherwood
Copy link
Author

Seems like it was applied too broadly, no? How are we supposed to handle responsive images in IE < 11 now? I've applied an override, but that just doesn't seem right.

@mdo
Copy link
Member

mdo commented Jun 30, 2014

Yeah, probably need to revisit to test more things out.

@mdo mdo added the css label Jun 30, 2014
@cvrebert cvrebert changed the title IE backslash hack on .img-responsive stretches images IE backslash hack on .img-responsive stretches images on IE<11 Jun 30, 2014
@cvrebert cvrebert added this to the v3.2.1 milestone Jun 30, 2014
@cvrebert
Copy link
Collaborator

cvrebert commented Jul 3, 2014

Perhaps we could qualify the width declaration with [src$=".svg"]

@amit777
Copy link

amit777 commented Jul 3, 2014

Sorry if this is completely unrelated, but I noticed a bug in IE <=10 where img-thumbnail is also stretching the image to the size of the containing div. it was working fine in 3.1.1.. I'm now on 3.2.0.

@hnrch02
Copy link
Collaborator

hnrch02 commented Jul 3, 2014

@cvrebert That seems awfully specific and won't handle all cases, like a source with a query string (which is pretty common) or a source without an extension.

@cvrebert
Copy link
Collaborator

cvrebert commented Jul 3, 2014

@amit777 If it's an SVG, it's probably related. img-thumbnail extends .img-responsive
@hnrch02 Agreed. Don't know what's the best way to handle this.

@amit777
Copy link

amit777 commented Jul 3, 2014

The image I was working with is a standard .jpg

<img class="img-thumbnail" src="testimage.jpg"/>

@isherwood isherwood changed the title IE backslash hack on .img-responsive stretches images on IE<11 IE backslash hack on .img-responsive stretches images in IE<11 Jul 3, 2014
@hnrch02
Copy link
Collaborator

hnrch02 commented Jul 3, 2014

Given that this breaks more than it really fixes, I think reverting the fix and adding a callout to the docs suggesting the fix of width: 100% \9; on SVG images would be the right way to go about this.

@isherwood
Copy link
Author

Why not .svg-responsive?

@hnrch02
Copy link
Collaborator

hnrch02 commented Jul 3, 2014

Because if we only assign width: 100% \9; to .svg-responsive it wouldn't make any sense to add that class as it doesn't do anything for other browsers than IE and if we'd make it extend .img-responsive we would also need to make .svg-thumbnail which would be overly redundant.

@amit777
Copy link

amit777 commented Jul 4, 2014

Is the JPG issue i'm facing related to this? If not, I'm happy to file a different issue.

@mdo
Copy link
Member

mdo commented Jul 4, 2014

@amit777 Have an example or screenshot?

mdo added a commit that referenced this issue Jul 8, 2014
@mdo
Part 1 for fixing #13996: Revert the width: 100% \9; IE hack for SVG …
c769d7c 
…img-responsive
mdo added a commit that referenced this issue Jul 8, 2014
@mdo
Part 2 for fixing #13996: Add a docs callout to help folks using SVG …
4f5efb8 
…images in IE8-10
@mdo
Copy link
Member

mdo commented Jul 8, 2014

Ended up doing what @hnrch02 suggested. Reverted the hack and documented the need for it for SVG images.

@mdo mdo closed this as completed Jul 8, 2014
@cvrebert cvrebert mentioned this issue Jul 8, 2014
Closed
@gvilcins
Copy link

gvilcins commented Jul 9, 2014

@isherwood - try adding "width: auto" to .img-responsive in your local CSS file. That will override the BS stylesheet.

@acrogenesis
Copy link

This doesn't work on Safari 8.0
screen shot 2014-09-03 at 1 39 54 pm

@hnrch02
Copy link
Collaborator

hnrch02 commented Sep 3, 2014

@acrogenesis What do you mean by "this doesn't work"?

@acrogenesis
Copy link

@hnrch02r it isn't applied hence the strikethrough

@hnrch02
Copy link
Collaborator

hnrch02 commented Sep 3, 2014

@acrogenesis It isn't supposed to be applied in Safari 8, it's a hack for IE 8-10. Also, it has been removed from the code base and won't be included in 3.2.1.

@twbs twbs locked and limited conversation to collaborators Sep 3, 2014
cvrebert added a commit that referenced this issue Sep 27, 2014
@cvrebert
Port #13996 over to hosted docs
3625fc0
cvrebert added a commit that referenced this issue Oct 7, 2014
@cvrebert
Revert "Port #13996 over to hosted docs"
71c3a9e 
This reverts commit 3625fc0.
stempler pushed a commit to stempler/bootstrap that referenced this issue Nov 4, 2014
@mdo
(less) Part 1 for fixing twbs#13996: Revert the width: 100% \9; IE ha…
bdac057 
…ck for SVG img-responsive
peschee pushed a commit to gridonic/bootstrap-sass that referenced this issue Dec 1, 2014
Remove IE width hack
392611f 
twbs/bootstrap#13996
jimt added a commit to oeru/oeru_course that referenced this issue Aug 4, 2015
@jimt
Remove .img-responsive backslash hack
aa282f8 
The fix for responsive SVG images in IE8 caused more problems
than it solved. It has been removed from more modern versions
of Bootstrap.

Details: twbs/bootstrap#13996
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
css
Projects
None yet
Milestone
v3.3.0
Development

No branches or pull requests
7 participants
@mdo @cvrebert @hnrch02 @acrogenesis @gvilcins @amit777 @isherwood